Grow your CSS skills. Land your dream job.

Drop down menu with css only

  • # June 7, 2013 at 3:41 pm

    I’m struggling to style a css drop down menu. I’ve looked at a few tutorials but I’m not quite getting there. Please look at this pen, [http://cdpn.io/yiKbo](http://cdpn.io/yiKbo “pen”). The aim is for the sub menu to be centred beneath its parent item. Also when hovering over a sub-menu item, the positioning of the sub menu is off.

    I tried to follow a newish tutorial and amend the css values to fit my requirements but I don’t understand why nav ul ul is defined twice in the css and how to position the sub menu so it sits nicely centred under its parent item. Thanks for any help.

    # June 7, 2013 at 5:08 pm

    Hello,
    When you do nut understand something, you can rmove it to find out it’s purpose, or only rebuild your selector from what you understand.
    For instance a bit of clean up an reorganizing/rewriting some selector , can get you here:


    nav ul ul {
    position:absolute;left:-9999px;
    }
    nav li {position:relative;}
    nav ul li:hover > ul {
    left:0;
    }
    nav ul {
    list-style:none;
    font-family:'Gill Sans';
    font-size:.75em;
    padding:0;margin:0;
    }
    nav >ul> li {
    float:left;
    }
    nav ul li a{
    display:block;
    padding: 5px 25px;
    text-decoration:none;
    }

    Note, i change display:none; for left:-9999px;

    http://codepen.io/gcyrillus/pen/gCfpx

    # June 8, 2013 at 6:17 am

    Thanks for your reply. It works nicely. I didn’t understand what the other css was doing but this makes more sense.

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

You must be logged in to reply to this topic.

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