下拉导航栏（CSS和HTML）无法正常工作

-1

所以我有一个使用CSS/HTML/PHP构建的网站下拉导航栏（CSS和HTML）无法正常工作

标题包含我的导航栏。在过去的几个小时里，我一直在改变我的导航栏，使它看起来更好。我按照自己想要的方式得到它后，它搞砸了我的侧栏，我不得不解决这个问题和其他一些事情，现在它不再显示下拉菜单。这里是网站 Site link

这里是代码我使用

<div id="background-color" align="center"> 

<div class="Menu"> 
    <ul id="navbar"> 
     <li><a href="index.php" class="MenuButton"><span>Home</span></a></li> 
     <li><a href="theteam.php" class="MenuButton"><span>About Us</span></a> 
      <ul> 
       <li><a href="theteam.php">The Team</a></li> 
       <li><a href="awards.php">Awards</a></li> 
       <li><a href="blog.php">Blog</a></li> 
       <li><a href="demo.php">Demonstrations</a></li> 
       <li><a href="robots.php">Robots</a></li> 
      </ul> 
     </li> 

     <li><a href="FIRST.php" class="MenuButton"><span>FIRST</span></a> 
      <ul> 
       <li><a href="FIRST.php">What is FIRST</a></li> 
       <li><a href="firsthistory.php">FIRST History</a>   </li> 
       <li><a href="competitions.php">Competitions</a> </li> 
      </ul> 
     </li> 
     <li><a href="sponsors.php" class="MenuButton"><span>Sponsors</span></a> 
      <ul> 
       <li><a href="sponsors.php">Our Sponsors</a></li> 
       <li><a href="become_a_sponsor.php">Become A Sponsor</a></li> 
       <li><a href="Donate.php">Donate</a></li> 
       <li><a href="volunteer.php">Volunteer</a></li> 
      </ul> 
     </li> 
     <li><a href="resources.php" class="MenuButton"><span>Resources</span></a></li> 
     <li><a href="contact.php" class="MenuButton"><span>Contact Us</span></a> 
      <ul> 
       <li><a href="calendar.php">Calendar</a></li> 
       <li><a href="location.php">Our Location</a></li> 
       <li><a href="contact.php">Feedback</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

</div> 

    </td> 
</tr> 
</table> 
<!-- End Navigation -->`

CSS代码

#navbar ul { 
font-family: Arial, Verdana; 
font-size: 14px; 
margin: 0; 
padding: 0; 
list-style: none; 
} 
    #navbar ul li { 
display: block; 
position: relative; 
float: center; 
} 
    #navbar li ul { display: none; } 
    #navbar ul li a { 
display: block; 
text-decoration: none; 
color: #FFFFFF; 
border-top: 1px solid #FFFFFF; 
padding: 5px 15px 5px 15px; 
background: radial-gradient(ellipse at center, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* W3C */; 
    margin-left: 1px; 
    white-space: nowrap; 
    } 
#navbar ul li a:hover { background:transparent url('images/structure/ActiveMenuButtonAnchor.png') no-repeat top left; } 
#navbar li:hover 
#navbar ul { 
    display: block; 
    position: absolute; 
} 
#navbar li:hover li { 
    float: none; 
    font-size: 11px; 
} 
#navbar li:hover li a:hover { background: radial-gradient(ellipse at center, rgba(19,19,19,1) 0%,rgba(28,28,28,1) 9%,rgba(43,43,43,1) 24%,rgba(17,17,17,1) 40%,rgba(0,0,0,1) 49%,rgba(44,44,44,1) 50%,rgba(71,71,71,1) 61%,rgba(102,102,102,1) 75%,rgba(89,89,89,1) 88%,rgba(76,76,76,1) 100%); /* W3C */ }

有什么想法？

来源

2013-05-15 user2383969

深思：始终工作代码的副本，所以如果当事情搞砸了，你有你的原稿。 –

你有很多破碎的CSS和损坏的HTML，,和未封闭的CSS类的位，最好的解决方案，然后答案可能会自己的 – daniel

这是一个很不错的教程，可以帮助清理代码收益率没有结果：http://www.mrc-productivity.com/techblog/?p=1049 – Duffmaster33

您将子菜单设置为display: none，但没有任何机制可以覆盖它。如果添加这些样式它应该工作：

#navbar li {position: relative;} 

#navbar li ul {position: absolute; left: -9999px; display: block;} 

#navbar li:hover ul {left: 0;}

来源

2013-05-15 03:28:19

下拉导航栏（CSS和HTML）无法正常工作

回答

相关问题