CSS Horizo​​ntal Menu x-position错误，如何直接放在父菜单下？

Question

我正在尝试使用 CSS 构建水平下拉菜单。但是子菜单要么出现在站点的完全左侧(当我将其设置为 position: absolute 时)，要么出现在菜单的最左侧(当设置为 position: relative 时) >).我希望它直接出现在我悬停的菜单下方。

这是我的代码:

/* div für Menü */
.menu{
 height: 35px;
 float: left; 
 padding: 0px;
 margin: 0px;
 outline: 1px solid grey;
 background-color: #f6f6f6;
 font-size:100%;
}

/* UL Menü */
.menu ul{
 list-style: none;
 margin: 0px;
 padding: 0px;
 float: left;
 height: 100%;
 background-color: #f6f6f6;
}

/* Untermenü anzeigen bei Mouseover */
.menu ul li:hover ul{
 display: block;
}

/* Hintergrund ändern bei Mouseover */
.menu ul li:hover{
 background-color: #005ea2;
}


/* Menü LI */
.menu ul li{
 display: inline;
 height: 35px;
 padding-left: 5px;
 padding-right: 5px;
 padding-top: 9px;
 padding-bottom: 9px;
 margin: 0;
 position: relative;
 border-right: 1px dashed gray;
}

/* Letzter Eintrag ohne Rand */
.menu li:last-child{
 border: none;
}


.menu a{ 
 line-height: 250%;
 color: #333333;
 text-decoration: none;
 height: 100%;
 margin: 0px;
}


/* UL Untermenü */
.menu ul li ul{
 display: none;
 width: 200px;
 padding: 0px;
 margin: 0;
 background-color: #f6f6f6;
 outline: 1px solid gray;
 position: absolute;
 z-index: 200;
}


/* LI Untermenü */
.menu ul li ul li{
 height: 35px;
 display: block;
 line-height: 100%;
 padding: 0px;
 border: none;
 background-color: #f6f6f6;
 position: relative;
}

Answer 1

在这里添加

.menu ul li:hover{
    background-color: #005ea2;
}

position:relative；。

这将建立一个 containing block为了能够相对于它定位东西。之后，您只需摆弄不同的 top 和 left 值即可获得所需的确切结果。

.menu ul li ul 上的 z-index 也没有用。

单独说明:欢迎使用 StackOverflow!