Html 导航栏内部选项卡定位

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

在代码中，

OuterTab1

和

OuterTab2

始终低于

Tab2

，尽管我希望它们处于与示例图像中相同的高度

我知道这听起来不太清楚，请检查这里：

表1
表2

外层B1
外层B2

您需要相对于悬停的

定位绝对定位的子菜单（

）。所以应用

位置：相对用于

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

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


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