CODEWITHSUNDEEP
css
chap
chap

Reputation: 1869

CSS Dropdown menu: How to make absolute positioned sub nav line up perfectly

I'm creating a pure CSS drop down menu using absolute positioning but am having problems lining the sub menu up with the main navigation. The sub nav background color is a slightly darker red that matches the color of the background for the list items in the main navigation when they are hovered over. The problem is the sub nav is not lining up properly.

I have created a simple jsfiddle with the code I am using to explain what I mean.

http://jsfiddle.net/38Krm/

The full code is in the fiddle but this is essentially how I'm doing it. 

nav ul li {
    float:left;
    padding:21.5px 1%; /* 10px; */
    position:relative;
}

nav ul ul {
    display:none;
    position:absolute;
    top:100%;
    background-color:#B91428;
}

When the main navigation list item is hovered over its background should line up exactly with the background of the sub navigation list item but I can't seem to get it to work. Any help would be appreciated.

Upvotes: 1

Views: 906

Answers (1)

SW4
SW4

Reputation: 71160

Demo Fiddle

Add left:0 to nav ul ul

nav ul ul {
    display:none;
    position:absolute;
    top:100%;
    background-color:#B91428;
    left:0;
}

Upvotes: 4

Related Questions