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


Tags: css

Problem :

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.



Solution :

Demo Fiddle

Add left:0 to nav ul ul

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

    CSS Howto..

    How to make gutter between columns in a CSS grid system

    How to make the hover attributes stays when it is clicked/active?

    How do I add another tab using CSS3? Noy Hadar

    How can I swap out text in a text-box by using only CSS mouse related events?

    How to edit css live with ie6

    How to style a particular paragraph element in css without effecting the other paragraphs in the same class?

    How to use CSS to make this works on retina screen?

    How do I use pseudo-selectors to change a “Home” button to an icon using just CSS?

    How can I add a hover effect to icons with CSS? [closed]

    How to display code in the same line?

    How to style an image created using javaScript

    How can I set my unordered list to be in the middle not in-line (see image)?

    How to set a box on bottom of a box?

    How does one override the JQuery UI styles?

    How to add an additional css class from code behind using ASP.NET?

    How to remove spacing around in CSS? [duplicate]

    How can I fix an element to the page that is of a variable distance from the edge of the screen?

    How to insert line breaks in HTML documents using CSS

    How can I delete these arrows?

    Box-shadow is not showing or z-index

    How to prevent HTML elements from being pushed down the page

    How to create multiple spoiler buttons

    How to add css class on every third post in wordpress?

    JQuery/CSS - How i can set imagem full size of div

    How to override the slide effect to dissolve effect in JQuery Mobile using CSS3 feautures?

    How to set
  • Backgound color?
  • How to select all cell starting, containing or ending with some word with JQuery/CSS?

    how to get image to show up to the left of panel (both in same row)

    How do I change properties of text that's being imported via php

    How to change my css code to fit the footer to the bottom of the page for any size of monitor?