Grow your CSS skills. Land your dream job.

Display Submenu Dropdown On Hover

  • # September 25, 2012 at 10:44 am

    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: http://css-tricks.com/forums/discussion/19699/help-needed-with-drop-down-menu#Item_4

    # September 25, 2012 at 10:50 am

    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!

    # September 25, 2012 at 3:51 pm

    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

    # September 26, 2012 at 11:09 am

    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

    # September 26, 2012 at 11:31 am

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

    # September 26, 2012 at 11:40 am

    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.

    # September 3, 2013 at 1:43 pm

    Your snippet worked @Senff, thanks a lot.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".