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

[jeffpeterson]

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

[jeffpeterson]

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;
}**

[JohnMotylJr]

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/

[Author]

Posts