导航栏内部选项卡定位

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

Answer 2

更新您的CSS，如下所示。这完全是关于元素的定位。

 .button {
display: inline-block;
text-align: center;
}
* {
font-family: sans-serif;
color: white;
}
nav {
background-color: black;
padding: 10px 0px 10px 0px;
width: 452px;
border-radius: 5px;
}
ul, ol {
list-style-type: none;
margin: 0px;
padding: 0px;
position: relative;
}
li {
vertical-align: top;
width: 100px;
height: 15px;
text-align: left;
background-color: black;
padding: 5px;
position:relative;
}
 li:hover {
background-color: grey;
}
nav ul ul {
display: none;
text-align: left;
position:absolute;
left:0;
top:100%;
}
nav ul li:hover > ul {
display: block;
}
ul ul ul {
position: absolute;
width: 100px;
left: 100%;
top:0;
z-index: 5;
padding:0;
margin:0;
}
.Arrow {
float: right;
}

FIDDLE DEMO