CSS Horizo​​ntal Menu有错误的x位置，如何直接放在父菜单下？

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

a position: relative;。

这将建立一个containing block，以便能够相对于它定位东西。之后，您可以调整不同的top和left值，以获得准确的结果。

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

另请注意：欢迎使用StackOverflow！