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
Post a Comment