html - 使导航菜单下降的子菜单

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

我该如何解决这个问题？

看看我做了什么。

这就是我要的：

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

在这里摆弄