CODEWITHSUNDEEP
htmlcssdrop-down-menu
Josh
Josh

Reputation: 1421

Pure CSS dropdown menu

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>

Upvotes: 2

Views: 1697

Answers (4)

Arjan
Arjan

Reputation: 9874

#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.

Upvotes: 0

Karl Nicoll
Karl Nicoll

Reputation: 16419

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;
}

Upvotes: 1

Aajahid
Aajahid

Reputation: 1686

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;
}

Upvotes: 0

Drew Wills
Drew Wills

Reputation: 8446

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

Upvotes: 0

Related Questions