html - Pure CSS dropdown menu -
i'm trying fashion 100% css , html dropdown menu what's seen on http://phpbb.com. when hover on navigation links, new div appears below 1 hovered onto.
what i'm trying make .submenu
appear below <li>
it's nested using #nav li a:hover submenu {
. knowledge css selector should select .submenu
div when a
element hovered over? doesn't work.
#nav { list-style-type: none; margin: -5px 0px 0px 5px; } #nav li { display: inline; } #nav li { 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>
your second last selector looking "submenu" element, should correct ".submenu"
like this:
/*#nav li a:hover submenu {*/ #nav li a:hover .submenu { display: block; color: red; }
edit:
to hover work, need adjust css hover applied list item, instead of anchor tag:
#nav li:hover .submenu { display: block; color: red; }
Comments
Post a Comment