I cannot get my CSS drop down menu to work... |
I cannot get my CSS drop down menu to work... |
WestX64 |
Jan 23 2015, 11:29 AM
Post
#1
|
Group: Members Posts: 1 Joined: 23-January 15 Member No.: 22,074 |
I have been trying to figure out why my CSS drop down menu is not working for the better part of a hour now but cannot for the life of me figure it out. Any help / suggestions would be much appreciated!
My HTML code: CODE <div id="navigation"> <nav> <ul> <!-- This is the base level navigation --> <li><a href="#">January</a></li> <ul> <!--This is a second level drop down menu --> <li><a href="#">Weel 1</a></li> <ul> <!--This is a third level pop out menu --> <li><a href="#">Homework 1</a></li> <li><a href="#">Lists 1</a></li> <li><a href="#">Sample 1</a></li> </ul> <li><a href="#">Week 2</a></li> </ul> <li><a href="#">February</a></li> <li><a href="#">March</a></li> </ul> </nav> </div> My CSS code: CODE #navigation { background-color: #00FF77; width: 80%; height: 60px; margin: 0px auto; } nav { margin: 0px auto; width: 100%; } nav ul { padding: 0; margin: 0; list-style: none; position: relative; display: block; } nav ul li { float: left; display: list-item; list-style: none; background-color: #6600FF; } nav ul li a { display: block; padding: 10px 10px; color: black; font-size: 20px; text-decoration: none; } li a:hover { background-color: red; } /* Hide the drop down and pop up menu levels by default */ nav ul ul { display: none; position: absolute; top: 58px; } /* Show the drop down and pop out menus on hover */ nav ul li:hover > ul { display: list-item; } /* First level drop down */ nav ul ul li { width: 170px; float: none; position: relative; border-bottom: none; } /* Secont level pop out menu */ nav ul ul ul li { position: relative; top: -58px; left: 170px; } |
Christian J |
Jan 23 2015, 01:07 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,650 Joined: 10-August 06 Member No.: 7 |
CODE <li><a href="#">January</a></li> <ul> The UL above must be inside the LI. QUOTE CODE <li><a href="#">Weel 1</a></li> <ul> Ditto... The above should make the sub menu appear on hover, but it will close again when you try to hover a sub sub menu. Maybe that's caused by the positioning. See also http://htmldog.com/articles/suckerfish/dropdowns/ |
Lo-Fi Version | Time is now: 18th April 2024 - 02:55 AM |