css导航菜单未按预期显示

Question

此菜单显示我希望它在Dreamweaver cs6的实时视图中的显示方式。

当我在任何浏览器中查看它时，它不应用部分css而我无法理解为什么？

这是html：

<div id="header" class="clear">

     <ul id="nav">
            <li<a href="#">REHABS</li></a>
            <li<a href="#">BUSES</li></a>
            <li<a href="#">TESTIMONIES</li></a>
            <li<a href="#"><img src="images/logo.png"/></li></a>
            <li<a href="#">SCHOOLS</li></a>
            <li<a href="#">EVENTS</li></a>
            <li<a href="#">FUNDING</li></a>
     </ul>

和css：

#header {
height: 100px; padding: 20px 0 0 0; width: 960px; margin: 0 auto;

}

#header ul#nav {
list-style: none; margin: 30px auto;

}

#header ul#nav li {
    float: left; padding: 0 0 0 20px; margin: 0 15px 0 0;   
}

#header ul#nav a img {position:relative; bottom:35px; margin: 0 0 80px 0;}

    #header ul#nav li:first child { background:none; }

        #header ul#nav li a {
            font-size: 21px; color: #e9e9e9; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; text-decoration: none; font-weight: bold;
        }

            #header ul#nav li a:hover, #header ul#nav1 li a.active {
                color: #4eb1ba;
            }

任何帮助将不胜感激：）

Answer 1

您没有关闭开场<li>并且您的嵌套无效（在结束</a>之后，您关闭了</li> 方式 - 尝试改为：

<div id="header" class="clear">

 <ul id="nav">
        <li><a href="#">REHABS</a></li> <!-- You had <li instead -->
        <li><a href="#">BUSES</a></li>
        <li><a href="#">TESTIMONIES</a></li>
        <li><a href="#"><img src="images/logo.png"/></a></li>
        <li><a href="#">SCHOOLS</a></li>
        <li><a href="#">EVENTS</a></li>
        <li><a href="#">FUNDING</a></li>
 </ul>

你的CSS看起来很好，所以我假设这是你的问题。

Answer 2

此外，您应该在li标签中拥有锚点

<li><a href="#">TESTIMONIES</a></li>