Question

我正在尝试通过给出主菜单的il相对位置和ul在其中的绝对位置来创建一个带有子菜单的菜单。为什么子菜单将ul视为容器，而不是它的父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;
}

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

2 个答案: