为什么ul“菜单项2”中的下拉列表没有完全与其父li元素的顶部对齐？
将下拉ulCSS设置为：
position:absolute;
top:0;
left:0;
我希望它从父元素的左上角开始覆盖，即完全覆盖它。
一些令人困惑的症状：
我希望父菜单可单击，并且在某些情况下具有下拉菜单。因此，在有下拉菜单的地方，父菜单<li>有一个<a>填充的菜单，以增加可点击的区域。<li>由于li:hover显示了相同的填充区域，因此还增加了contains。这可以按需工作。
但是，当下拉列表显示并对齐时<li>，<li>似乎位于之前被展开的位置<a>。当我在浏览器（Chrome和Firefox）中签入时，该<li>元素实际上并未填充与相同的空间<a>，因此该下拉列表显示在所需位置以下。
我知道我可以在绝对定位的下拉列表中使用top：SOME_NEGATIVE_OFFSET，但这感觉很hacky，我想了解发生了什么？
这是我的第一篇文章，请对我轻松一点:)
<!DOCTYPE html>
<html>
<head>
<title>DropDownTest</title>
<style>
ul{
list-style:none;
margin:0;
padding:0;
}
li{
display:block;
position:relative;
}
li>a{
padding:1rem;
background-color:grey;
}
li>a:hover{
background-color:lightgray;
}
.mainbar>li{
float:left;
}
li.hasDrop:hover>ul{
display:block;
}
.dropContent{
display:none;
position:absolute;
top:0; /*not working as expected*/
left:0;
margin:0;/*thought this might have helped but no*/
padding:0;
z-index:1;
list-style:none;
min-width:100%;
}
.dropContent>li>a{
display:block;
}
</style>
</head>
<body>
<div>
<ul class="mainbar">
<li><a href="#">Menu Item 1</a></li>
<li class="hasDrop">
<a href="#">Menu Item 2</a>
<ul class="dropContent">
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Sub 3</a></li>
</ul>
</li>
<li><a href="#">Menu Item 3</a></li>
</ul>
</div>
</body>
</html>发生这种情况是因为您的a元素将填充作为嵌入式元素。
修改此规则：
li>a {
padding: 1rem;
background-color: grey;
display: block; /* this*/
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: block;
position: relative;
}
li>a {
padding: 1rem;
background-color: grey;
display: block; /* this*/
}
li>a:hover {
background-color: lightgray;
}
.mainbar>li {
float: left;
}
li.hasDrop:hover>ul {
display: block;
}
.dropContent {
display: none;
position: absolute;
top: 0;
/*not working as expected*/
left: 0;
margin: 0;
/*thought this might have helped but no*/
padding: 0;
z-index: 1;
list-style: none;
min-width: 100%;
}
.dropContent>li>a {
display: block;
}<div>
<ul class="mainbar">
<li><a href="#">Menu Item 1</a></li>
<li class="hasDrop">
<a href="#">Menu Item 2</a>
<ul class="dropContent">
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Sub 3</a></li>
</ul>
</li>
<li><a href="#">Menu Item 3</a></li>
</ul>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句