Reputation: 1276
So I've been trying to get this dropdown menu to work properly for past few hours and I'm having no luck.
The HTML is:
<nav>
<ul id="#sideNavArchive">
<li><a>Year</a></li>
<ul>
<li><a>Month</a></li>
<li><a>Month</a></li>
</ul>
<li><a>Year</a></li>
<ul>
<li><a>Month</a></li>
<li><a>Month</a></li>
</ul>
</ul>
</nav>
Now, all I'm looking to do is hover of Year and for the months to drop down, but I seem to be running into trouble with the CSS selectors.
The CSS I have at the moment:
ul#sideNavArchive > li{background-color:red; display:block;}
ul#sideNavArchive > ul > li{display:none;}
ul#sideNavArchive > li:hover ul > li{display:block;}
There's obviously something with that bottom piece of css which is causing the issue, if someone could point it out to me that'd be great :)
Upvotes: 0
Views: 4232
Reputation: 246
HTML:
<ul id="nav">
<li><a>Year<a>
<ul>
<a>Month</a>
<a>Month</a>
</ul>
</li>
<li><a>Year<a>
<ul>
<a>Month</a>
<a>Month</a>
</ul>
</li>
</ul>
CSS:
#nav{
list-style:none;
position:relative;
}
#nav li{
float:left;
margin-right:10px;
position:relative;
}
#nav a{
display:block;
padding:5px;
}
#nav ul{
position:absolute;
left:-9999px;
}
#nav ul li{
padding-top:1px;
float:none;
}
#nav li:hover ul{
top: 10px;
left:-40px;
}
It's basically done in the #nav ul
where left
is -9999px;
which means out of the screen, by hovering it gets in the screen.
Upvotes: 0
Reputation: 1719
You have a typo in your markup. You don't need the #
symbol. Change this:
<ul id="#sideNavArchive">..</ul>
to this:
<ul id="sideNavArchive">..</ul>
Additionally, you can reduce the specificity of your targeting, and just target the direct descendent ul
(sub-menu), rather than specifying each li
contained therein:
#sideNavArchive > ul { display: none; }
#sideNavArchive > li:hover + ul { display: block; }
Upvotes: 1
Reputation: 115372
The basic problem was that you were closing the li
too early
<li><a>Year</a>
<ul>
<li><a>Month</a></li>
<li><a>Month</a></li>
</ul>
</li>
is the proper structure.
Upvotes: 0
Reputation: 1436
In addition to the typo, I think you are looking for something like this:
http://jsfiddle.net/jbaum012/dekYZ/
#sideNavArchive > li{background-color:red; display:block;}
#sideNavArchive > ul > li{display:none;}
#sideNavArchive > li:hover + ul > li{display:block;}
Upvotes: 2