html - 如何在容器中定位绝对元素？

Question

il我正在尝试通过提供主菜单的相对位置及其ul内部的绝对位置来在元素下制作带有子菜单的菜单。为什么子菜单将 toul视为它的容器而不是它的父级li？

的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>​

的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

这可能是因为它是您的锚标记向左浮动并因此定义了位置，而不是 li 元素。

nav a将选择器更改为nav li并修复它。li 元素在您当前的代码中并没有真正的位置。

Answer 2

我已经更新了你的小提琴，使菜单按照我猜你想要的方式工作：http: //jsfiddle.net/6pgHa/3/

nav {
 width: 600px;
 margin: 50px auto 0;
}

nav > ul li {
 float: left;
 position: relative;
}

nav > ul li a {
 float: left;
 padding: 10px;
 border: solid 1px #C0C0C0;
 display:inline-block;
}


nav > ul li ul {
 position: absolute;
 top:50px;
 left:-9999px;
}

nav > ul li:hover ul {
 left:0;
}