Question

I am trying to make a menu with sub-menu under an element by giving the main menu’s il relative position and the ul inside it absolute position. Why does the sub-menu treats the to ul as it’s container and not it’s parent li?

the HTML:

<nav>
    <ul>
        <li><a href="#">Menu Item 1</a></li>
        <li><a href="#">Menu Item 2</a>
            <ul>
                <li><a href="#">Submenu Item 1</a></li>
                <li><a href="#">Submenu Item 2</a></li>
                <li><a href="#">Submenu Item 3</a></li>
            </ul>
        </li>
        <li><a href="#">Menu Item 3</a></li>
        <li><a href="#">Menu Item 4</a></li>
        <li><a href="#">Menu Item 5</a></li>
    </ul>
</nav>​

the CSS:

nav a {
    float: left;
    padding: 10px;
    border: solid 1px #C0C0C0;
    margin-left: -1px;
}

nav li {
    position: relative;
}

nav li ul {
    position: absolute;
}

​
http://jsfiddle.net/6pgHa/

Answer 1

It may be because it is your anchor tags that are floated left and therefore defining the position, not the li elements.

Change the nav a selector to nav li and this fixes it. The li elements don’t really have a position in your current code.