如何使导航看起来像这样？

Question

我真的不明白我如何使导航栏看起来像，

这是我到目前为止所得到的：

nav{
background-color: black;
padding: 20px;  
}
nav ul li {
display:inline;
margin: 10px;

Answer 1

这看起来像是作业，所以我不会给你完整的答案，但这应该可以为你提供所需的一切。

• li显示应该是内联块OR块，浮动左http://www.w3schools.com/cssref/pr_class_display.asp
• 然后向li（而不是导航）添加约20px的填充
• nav add border-top：5px solid red;
• 添加悬停导航ul li：hover {background：white;颜色：黑色; }

Answer 2

希望你花时间去理解一切，但我已经让你成了小提琴。 http://jsfiddle.net/tXkw9/1/

那就是说，我会省略navTop并使用边框顶部，我真的只是做得这么快又脏。

HTML：

<div id="navigation">
    <div class="navTop"></div>
     <div class="navBtm">
      <ul>
         <li><a href="#">News</a></li>
         <li><a href="#">About</a></li> 
         <li><a href="#">Events</a></li>
         <li><a href="#">Members</a></li>
     </ul>
    </div>
</div>

CSS：

#navigation{
    width:100%;
}

.navTop{
    height:5px;
    width:100%;
    background-color:red;
}

.navBtm{
    background:black;
    width:100%; 
    float:left;
}

.navBtm ul{
    float:left;
    padding:0px;
    margin:0px;
}

.navBtm li{
    padding:10px;
    display:inline-block;
    text-align:center;
}

.navBtm li a{
    text-decoration:none;
    color:white;
    font-weight:bold;
    font:Arial,sans-serif;
}


.navBtm li:hover{
    background-color:white;
}

.navBtm li:hover a{
    color:black;
}