- This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
Viewing 7 posts - 1 through 7 (of 7 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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
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!
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
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
This might help: http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
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.
Your snippet worked @Senff, thanks a lot.