2

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>

2

4 Answers 4

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;
}
3
  • Ah yes, the .submenu is a child of the li, not the a.
    – Neil
    Commented Apr 29, 2011 at 22:45
  • Perfect, it works when I add the hover to the list item. Thanks! :)
    – Josh
    Commented Apr 29, 2011 at 22:45
  • @Josh - Don't forget to mark as the answer if it helped by clicking on the green tick :-) Commented Apr 30, 2011 at 0:59
0

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

0

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;
}
0
#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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.