2013-04-24 73 views
0

此菜单显示我希望如何在Dreamweaver CS6上进行实时查看。css导航菜单不按预期方式显示

当我在任何浏览器中查看它不是应用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; 
      } 

任何帮助,将不胜感激:)

+2

Web开发101:切勿使用Dreamweaver中预览您的文档,或使用所见即所得的编辑器(希望你不是)。 这就是说,看看你的HTML结构。你的LI没有正确编码,每个人都缺少一个> – Michael 2013-04-24 15:40:11

+0

除了下面的答案之外,我刚刚注意到你已经有了'a.active'(一个类名)而不是'a:active'(一个伪类)在你的最后一块CSS。你需要伪类。 – 2013-04-24 16:08:10

回答

2

你不关闭你的开放<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看起来不错,所以我假设这是你的问题。

+1

这个标签嵌套不正确,只是为了让你知道... – 2013-04-24 15:44:01

+0

噢,我现在看到它 - 谢谢指出!固定 – Adrift 2013-04-24 15:45:45

+1

不用担心,可以自己编辑它我自己,但是当你的代表>我的代表它只是不会觉得正确:-) – 2013-04-24 15:47:34

1

你也应该有你的L1标签内锚

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