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>

Did you mean #nav li a:hover .submenu?

Neil
– Neil

2011-04-29 22:36:33 +00:00
Commented Apr 29, 2011 at 22:36 — Neil
– Neil, Commented Apr 29, 2011 at 22:36
you can try this demo : themeswild.com/read/…

Saravanan Kasi
– Saravanan Kasi

2017-01-25 22:16:42 +00:00
Commented Jan 25, 2017 at 22:16 — Saravanan Kasi
– Saravanan Kasi, Commented Jan 25, 2017 at 22:16

Karl Nicoll · Accepted Answer · 2011-04-29 22:42:24Z

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

edited Apr 29, 2011 at 22:42

answered Apr 29, 2011 at 22:37

Karl Nicoll

16.5k3 gold badges53 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Neil Over a year ago

Ah yes, the .submenu is a child of the li, not the a.

Josh Over a year ago

Perfect, it works when I add the hover to the list item. Thanks! :)

Karl Nicoll Over a year ago

@Josh - Don't forget to mark as the answer if it helped by clicking on the green tick :-)

Drew Wills · Accepted Answer · 2011-04-29 22:38:23Z

0

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

answered Apr 29, 2011 at 22:38

Drew Wills

8,4184 gold badges31 silver badges40 bronze badges

Comments

Aajahid · Accepted Answer · 2011-04-29 22:40:51Z

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

answered Apr 29, 2011 at 22:40

Aajahid

1,6962 gold badges14 silver badges34 bronze badges

Comments

Arjan · Accepted Answer · 2011-04-29 22:46:15Z

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.

answered Apr 29, 2011 at 22:46

Arjan

9,8941 gold badge33 silver badges43 bronze badges

Collectives™ on Stack Overflow

Pure CSS dropdown menu

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related