HTML和css菜单

Question

菜单的CSS和HTML文件。

@font-face { 
 
    font-family: 'Raleway'; 
 
    src: url('Raleway-Light.ttf'); 
 
    font-weight: normal; 
 
    font-style: normal; 
 

 
} 
 

 
body { 
 
    font-family: Raleway; 
 
    margin: 0; 
 
} 
 

 
main { 
 
    margin: 0 auto; 
 
    width: 1280px; 
 
} 
 

 
/*Menu*/ 
 

 
ul#menu { 
 

 
    margin-bottom: 50px; 
 
    position: relative; 
 
} 
 

 
label.show-menu { 
 
    display: none; 
 
} 
 

 
#show-menu { 
 
    display: none; 
 
} 
 

 

 
a:visited { 
 
    border: none; 
 
    color: black; 
 
    text-decoration: none; 
 
} 
 

 

 
ul#menu > li 
 
{ 
 
    display: inline-block; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    margin-left: 80px; 
 
    font-size: 30px; 
 
    min-height: 1px; 
 
    line-height: 1.3em; 
 
    padding: 10px; 
 
} 
 
ul#menu > ul.hidden { 
 

 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
} 
 
ul#menu > li li.submenu { 
 
    visibility: hidden; 
 
    float: none; 
 
    font-size: 20px; 
 
    margin: 30px; 
 
} 
 

 
ul#menu > li li:hover { 
 
    border-bottom: 1px solid black; 
 
} 
 

 
ul#menu > li:first-child:hover { 
 
    border-bottom: 1px solid black; 
 
} 
 

 
ul#menu > li:hover li.submenu { 
 

 
    visibility: visible; 
 
} 
 

 
ul#menu > li > ul.hidden > li.submenu { 
 
    margin: 0 10px 0 0; 
 
    position: relative; 
 
    padding: 0; 
 
    float: left; 
 
} 
 
ul#menu > li > ul.hidden > li.submenu > a { 
 
    padding: 10px 20px 10px 10px; 
 
    display: block; 
 
} 
 

 
#navinformatie { 
 
    margin-left: 265px; 
 
} 
 

 
#navverblijf { 
 
    margin-left: 525px; 
 
} 
 

 
#navbezienswaardigheden { 
 
    margin-left: 650px; 
 
} 
 

 
#Logo { 
 
    float: left; 
 
    display: inline-block; 
 
    position: absolute; 
 
    width: 56px; 
 
    height: 79px; 
 
}

<header> 
 
    \t \t <label for="show-menu" class="show-menu">Menu</label> 
 
     <input type="checkbox" id="show-menu" role="button"> 
 

 
     <div id="Logo"><img src="logo.png" alt="logo"></div> 
 
      <ul id="menu" class="mobile-top"> 
 
       <li class="hoofd"><a href="#">home</a> 
 
       <li class="cheat"><a href="#">informatie</a> 
 
        <ul class="hidden"> 
 
         <li class="submenu"><a href="#">algemene info</a></li> 
 
         <li class="submenu"><a href="#">wijken</a></li> 
 
         <li class="submenu"><a href="#">goed om te weten</a></li> 
 
        </ul> 
 

 
       <li class="cheat"><a href="#">verblijf</a> 
 
        <ul class="hidden"> 
 
         <li class="submenu"><a href="#">hotels</a></li> 
 
         <li class="submenu"><a href="#">hostels</a></li> 
 
        </ul> 
 
       <li class="cheat"><a href="#">bezienswaardigheden</a> 
 
        <ul class="hidden"> 
 
         <li class="submenu"><a href="#">toers</a></li> 
 
         <li class="submenu"><a href="#">entertainment</a></li> 
 
         <li class="submenu"><a href="#">musicals</a></li> 
 
         <li class="submenu"><a href="#">sport</a></li> 
 
        </ul> 
 
      </ul> 
 
     </header> 
 
     <div style="clear:both;"></div>

我想要实现：http://student.howest.be/marnik.bruyndonckx/eindopdrachtweb/Home.html

正如你所看到的，我需要的是菜单的子元素下显示的第一个列表标签的边境帮助。

凯文建议使用li：第一个孩子来定位第一个项目并加下划线，但似乎这样做后，现在没有边框了。

此外，菜单项之间的差距不对，它不会显示，因为它应该，我做错了什么？

我期待着只修改css文件，而不是html菜单。 我想我目前的两个问题只会导致我在css中犯的1-2个错误？

Answer 1

要定位在列表中的第一项使用first-child：

li:first-child { /* override styles here */ } 

项目之间的间距为B/C使用的是display: inline-block。本文应该帮助：https://css-tricks.com/fighting-the-space-between-inline-block-elements/