<li> 列表项和 <a> 锚标记之间的菜单交互不一致

Question

为什么 'Menu Item 2' 中的下拉列表 ul 没有与其父 li 元素的顶部绝对对齐？

将下拉列表 ul CSS 设置为：

position:absolute;
top:0;
left:0;

我希望它从父元素的左上角开始覆盖，即完全覆盖它。

一些令人困惑的症状：

我希望父菜单可以点击并且在某些情况下有一个下拉菜单。因此，在有下拉菜单的地方，父菜单 <li> 有一个 <a> 被填充以增加可点击区域。这也增加了包含 <li>，因为 li:hover 显示相同的填充区域。这按需工作。

但是，当显示下拉菜单并与 <li> 对齐时，<li> 似乎位于之前的位置，它被扩展了 <a>.当我在浏览器（Chrome 和 Firefox）中签入时，<li> 元素实际上并未填充与 <a> 相同的 space，因此下拉列表显示了一些低于我想要的位置。

我知道我可以在绝对定位的下拉菜单中使用 top:SOME_NEGATIVE_OFFSET，但这感觉很麻烦，我想了解发生了什么？

这是我的第一个post，请放轻松:)

<!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>

Answer 1

发生这种情况是因为您的 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>

<li> 列表项和 <a> 锚标记之间的菜单交互不一致

Inconsistent interaction in menu between <li> list item and <a> anchor tag

html

css

css-position

absolute