Dropdown Navigation Bar (CSS & HTML) not working correctly -


so have website built using css / html / php

the header includes navigation bar. last few hours have changing navigation bar looks better. got way want after screwed side bar , had fix , other things, not show drop down menus anymore. here site site link

here code using

`

<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 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  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 code

  #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 {  display: block;  text-decoration: none;  color: #ffffff;  border-top: 1px solid #ffffff;  padding: 5px 15px 5px 15px;  background: radial-gradient(ellipse @ 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 @ 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 */ } 

any thoughts?

you have sub menu set display: none there's no mechanism override that. if add these styles should work:

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

Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -