Grow your CSS skills. Land your dream job.

Trouble getting the drop down menu items to align under the parent menu-item

  • # March 21, 2013 at 7:32 pm

    I have developed a basic jQuery drop down menu that overlaps a jQuery dualslider, but am unable to get the sub-menu to appear directly underneath the main menu. I have checked several forums for answers to this question by setting different values for the z-index property and believe the absolute and relative positioning properties to position the menu are correct for the sections outlined in the css style sheet.

    This issue is apparent across all major web browsers (Firefox, Chrome, IE).You can see it here:

    [http://jsfiddle.net/jeffpeterson/u6dEB/](http://jsfiddle.net/jeffpeterson/u6dEB/ “http://jsfiddle.net/jeffpeterson/u6dEB/”)

    Any tips would be greatly appreciated to determine the fix for this issue.

    Thanks much in advance.

    Jeff

    # March 26, 2013 at 6:50 pm

    The reason the drop menu appears a long way down is because of this padding:

    **Code:
    header nav ul {
    float: right;
    padding: 34px 25px 0 0;
    }**

    Add something like this to override it:

    **Code:
    header nav ul ul {
    padding: 0;
    }**

    # March 26, 2013 at 6:59 pm

    All i changed was this:

    ul.dropdown ul {
    width: 220px;
    visibility: hidden;
    position: absolute;
    left: 0;
    padding: 0;
    }

    http://jsfiddle.net/john_motyl/EQKaQ/1/

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