Treehouse: 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 was largely adapted from

    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.


    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:

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

    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.


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


    # September 26, 2012 at 11:31 am

    This might help:

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