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

HTML & CSS
1

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/

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

Thanks much in advance.

Jeff

2

Hi jeffpeterson. Welcome to the forums. :slight_smile:

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

header nav ul {
float: right;
padding: [COLOR="#FF0000"]34px[/COLOR] 25px 0 0;
}

You could add something like this to override it:

header nav ul [COLOR="#FF0000"]ul[/COLOR] {
padding: 0;
}
3

Hi ralph.m,

Your suggestion did the trick! I did not realize that section of the code was causing the problem.

Thanks again.