I'm trying to fashion a 100% CSS and HTML dropdown menu like what's seen on http://phpbb.com. When you hover over the navigation links, a new div appears just below the one you hovered onto.
What I'm trying to do is make .submenu
appear just below the <li>
that it's nested into by using #nav li a:hover submenu {
. To my knowledge this CSS selector should select the .submenu
DIV when an a
element is hovered over? But it doesn't work.
#nav {
list-style-type: none;
margin: -5px 0px 0px 5px;
}
#nav li {
display: inline;
}
#nav li a {
display: block;
padding: 3px;
float: left;
margin: 0px 10px 0px 10px;
text-decoration: none;
color: #fff;
font-weight: bold;
position: relative;
}
#nav li a:hover {
text-shadow: 1px 1px #333;
}
#nav li a:hover submenu {
display: block;
color: red;
}
.submenu {
position: absolute;
display: none;
}
<ul id="nav">
<li><a href="/">Home</a>
</li>
<li>
<a href="/">Skins</a>
<div class="submenu">
hello :)
</div>
</li>
<li><a href="/">Guides</a>
</li>
<li><a href="/">About</a>
</li>
</ul>
#nav li a:hover .submenu
?