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

Question

我试图通过给主菜单的il相对位置和其中的ul绝对位置来制作一个带有元素下的子菜单。为什么子菜单将 to ul视为容器而不是父li？

该网页：

<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;
}