Pure CSS dropdown menu

Question

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>

Answer 1

Your second to last selector is looking for a "submenu" element, you should correct this to say ".submenu"

Like this:

/*#nav li a:hover submenu {*/
#nav li a:hover .submenu {
  display: block;
  color: red;
}

EDIT:

To get the hover to work, you also need to adjust your CSS so that the hover is applied to the list item, instead of the anchor tag:

#nav li:hover .submenu {
  display: block;
  color: red;
}

Answer 2

Are you missing a period ('.') before submenu in the selector #nav li a:hover submenu ?

Answer 3

Try to edit this following part. Put a. (dot) before the submenu, since its a class.

#nav li a:hover .submenu {
display: block;
color: red;
}

Answer 4

#nav li:hover .submenu {
    display: block;
    color: red;
}

You want the submenu to appear when you hover on li, not on a, simply because you do not have items with a class submenu inside the a.

Also you could consider using s for the submenus.