Display Submenu Dropdown On Hover

[GAtkins]

The code at this pen http://codepen.io/GAtkins/pen/zpjgx was largely adapted from http://designshack.net/articles/css/code-a-responsive-navigation-menu/

For the life of me, and believe me I have tried, I cannot get the submenus to display on hover.

Therefore, I was once again must submit myself to the expertise, and subsequent humiliation by, the experts found herein.

It is bound to be something simple.

Ladies and gentlemen, I fall on my sword – any help will be greatly appreciated.

Thanks in advance.

Glenn

ps: Edited to add that I am trying to code this by hand to avoid the awfulness that the DW Spry framework spits out.

I even looked at this post and could not figure how to adapt it to mine: https://css-tricks.com/forums/discussion/19699/help-needed-with-drop-down-menu#Item_4

[Senff]

You haven’t specified an action to show the submenu on hover — it’s always set to display:none, so it will never show.

Try adding this:

ul li:hover ul {
display:block;
}

Then the submenus should show on hover. Still need some styling there, though!

[GAtkins]

Thank you sir. Still trying to figure out how to make them drop below instead of to the right. But, I’m trying.

Thanks again.

Glenn

[GAtkins]

Can’t seem to get this.

Anybody willing/able to give me some pointers on how to get the submenus to display directly below the main menu items on hover?

Thanks in advance.

Glenn

[Paulie_D]

This might help: http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

[Senff]

The main thing you have to keep in mind is to give the top-level LI’s position:relative, and give the UL’s within it (containing the submenu) position:absolute; and a left position of -99999px;

Then on hovering the top-level LI, change the left-position to 0. That’s pretty much what the article @Paulie_D mentioned is based on.

[espellcaste]

Your snippet worked @Senff, thanks a lot.

[Author]

Posts