html - 导航栏内部选项卡定位

Question

我正在使用 CSS 和 HTML 制作下拉导航栏。下图是我想要实现的目标。

在代码中，OuterTab1 和 OuterTab2 始终低于 Tab2，尽管我希望它们与示例图像中的高度相同。

我知道这听起来不是很清楚，请在这里查看:http://jsfiddle.net/442xM/

<nav>
    <ul>
        <li>Tab1</li>
        <li>Tab2
            <ul>
                <li>OuterTab1</li>
                <li>OuterTab2</li>
            </ul>
        </li>
    </ul>
</nav>

Answer 1

您需要相对于悬停的 <ul> 定位绝对定位的子菜单 ( <li>) .所以申请position:relative;对于 <li>

li {
    position:relative; /* add this*/
    vertical-align: top;
    width: 100px;
    height: 15px;
    text-align: left;
    background-color: black;
    padding: 5px;
}

Demo