Неправильно работает панель навигации (CSS и HTML)

Question

Итак, у меня есть сайт, построенный с использованием CSS/HTML/PHP

В заголовок входит моя панель навигации. В течение последних нескольких часов я меняю навигационную панель, чтобы она выглядела лучше. Я получил его так, как хочу, после того, как он прикрутил боковую панель, и мне пришлось исправить это и некоторые другие вещи, теперь он больше не отображает выпадающие меню. вот сайт 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 */ } 

какие мысли?

Answer 1

У вас есть подменю, установленное на display: none, но нет механизма для его отмены. Если вы добавите эти стили, он должен сработать:

#navbar li {position: relative;} 

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

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