子菜单使导航菜单降下来

Question

我有一个使用HTML列表制作的简单导航栏。

第一个结构如下：

<div id="menu">
    <nav>
        <ul>
            <li><a href="#">My Profile</a></li>
            <li><a href="#">Inbox</a></li>
            <li><a href="#">Notifications</a></li>
        </ul>
    </nav>
 </div>

然后当我添加子菜单时，它是这样的：

<div id="menu">
    <nav>
        <ul>
            <li>
            <a href="#">My Profile</a>
            <ul>
                <li><a href="#">My Questions</a></li>
                <li><a href="#">Settings</a></li>
            </ul>
        </li>
            <li><a href="#">Inbox</a></li>
            <li><a href="#">Notifications</a></li>
        </ul>
    </nav>
 </div>

但问题是它破坏了菜单的整体外观。请参阅下面的CSS：

#menu {
    float: right;
    margin-right: 5%;
}

#menu nav ul li {
    display: inline;
    padding: 5px;
}

#menu nav ul li a {
    color: black;
    text-decoration: none;
    padding: 2px;
}

#menu nav ul li a:hover {
    background: #eee;
    border: 0;
    border-radius: 3px;
    box-shadow: 0px 0px 2px 1px #000;
}

#menu nav ul li ul li {
    display: block;
}

我该如何解决这个问题？

See我做了什么。

这就是我想要的：

Answer 1

您可以让子菜单position: absolute将其从主流中取出，并允许父列表项正确显示内联。

由于绝对定位元素的定位是相对于它们的第一个相对定位的父元素，要使子菜单垂直对齐，您可以将子菜单的父<li>设置为position:relative以确保任何绝对定位子元素（如子菜单）将相对于该元素定位。然后，只需将子菜单设置为left:0即可确保它保持在父级的左侧。

下面的代码将采用子菜单并将它们垂直对齐在父列表项的文本下面：

#menu nav > ul{
    position: relative;
}

#menu nav > ul ul{
    position: absolute;
    left: 0;
}

http://jsfiddle.net/6Qtbj/2/

Answer 2

这是'内联阻止'分层帮助：

#menu nav ul li {
    display: inline-block;
    padding: 5px;
}

fiddled here