Question

绝对定位的元素使用body元素作为锚，而不是父a元素

* { box-sizing: border-box }
a { text-decoration: none  }
body { font-family: Calibri; padding-top: 30px; }

#menu {
    border: 1px solid red;
    padding: 10px;
    display: flex;
    flex-flow: row nowrap;
}

#menu > a {
    position: relative;
}

#menu > a, #submenu > a {
    width: 100px;
    line-height: 40px;
    text-align: center;
    background-color: rgb(238, 238, 238);
    border-right: 1px solid black;
}

#menu > a:hover, #submenu > a:hover {
    background-color: #fff;
}

#submenu {
    display: flex;
    flex-flow: column nowrap;
    position: absolute;
    top: 40px;
}

<div id="menu">
    <a href="#">Menu Item</a>
    <a href="#">Menu Item</a>
    <a href="#">Menu Item</a>
        <div id="submenu">
            <a href="#">Sub Menu</a>
            <a href="#">Sub Menu</a>
            <a href="#">Sub Menu</a>
            <a href="#">Sub Menu</a>
        </div>
    <a href="#">Menu Item</a>
</div>

Answer 1

根据您的问题absolute-submenu应该在relative-menu3之内，只需修正标记，希望这是您面临的问题

* { box-sizing: border-box }
a { text-decoration: none  }
body { font-family: Calibri; padding-top: 30px; }

#menu {
    border: 1px solid red;
    padding: 10px;
    display: flex;
    flex-flow: row nowrap;
}

#menu > a {
    position: relative;
}

#menu > a, #submenu > a {
    width: 100px;
    line-height: 40px;
    text-align: center;
    background-color: rgb(238, 238, 238);
    border-right: 1px solid black;
}

#menu > a:hover, #submenu > a:hover {
    background-color: #fff;
}

#submenu {
    display: flex;
    flex-flow: column nowrap;
    position: absolute;
    top: 40px;
}

<div id="menu">
    <a href="#">Menu Item</a>
    <a href="#">Menu Item</a>
    <a href="#">
        Menu Item
        <p id="submenu">
            <a href="#">Sub Menu</a>
            <a href="#">Sub Menu</a>
            <a href="#">Sub Menu</a>
            <a href="#">Sub Menu</a>
        </p>
    </a>
    <a href="#">Menu Item</a>
</div>

Answer 2

在您提供的代码段中，id=submenu仅使用了一个元素，但是我认为如果这是一个真实的菜单，那么这是不正确的情况。

因此，假设您的菜单将包含多个子菜单，并且无需更改标记即可将该子菜单与锚点一起嵌套在另一个元素中，我准备了一个小片段供您检查。

仅进行一些小的CSS更改，才能将子菜单直接置于其父锚的下方。

在下面的代码段中，所有锚元素都具有一个子菜单，因此为了绑定锚，子菜单data-id属性用于锚，而匹配的id用于子菜单。

let links = document.querySelectorAll("a");
links.forEach(link => link.addEventListener('click', function(e){
let active = document.querySelectorAll('div.active:not(#'+e.target.dataset.id+')');
active.forEach(function(el) {
if(el.id!==e.target.dataset.id) {el.classList.remove('active');
}
});
let sub = document.getElementById(e.target.dataset.id);
sub.classList.toggle('active');
})
);

* {
  box-sizing: border-box
}

a {
  text-decoration: none
}

body {
  font-family: Calibri;
  padding-top: 30px;
}

.menu {
  border: 1px solid red;
  padding: 10px;
  display: flex;
  flex-flow: row nowrap;
  height: 65px;
}

.menu>a {
  position: relative;
}

.menu>a,
.submenu>a {
  left: 0;
  width: 100px;
  line-height: 40px;
  text-align: center;
  background-color: rgb(238, 238, 238);
  border-right: 1px solid black;
}

.menu>a:hover,
.submenu>a:hover {
  background-color: #fff;
}

.menu>.submenu {
  display: none;
  flex-flow: column nowrap;
  position: relative;
  top: 45px;
  margin-left:-100px; 
}
.menu>.submenu.active {
  display:flex;
}

<div class="menu">
  <a href="#" data-id="sub1">Menu Item</a>
  <div class="submenu" id="sub1">
    <a href="#">Sub Menu</a>
    <a href="#">Sub Menu</a>
    <a href="#">Sub Menu</a>
    <a href="#">Sub Menu</a>
  </div>
  <a href="#" data-id="sub2">Menu Item</a> 
  <div class="submenu" id="sub2">
    <a href="#">Sub Menu</a>
    <a href="#">Sub Menu</a>
    <a href="#">Sub Menu</a>
    <a href="#">Sub Menu</a>
  </div>
  <a href="#" data-id="sub3">Menu Item</a>
  <div class="submenu" id="sub3">
    <a href="#">Sub Menu</a>
    <a href="#">Sub Menu</a>
    <a href="#">Sub Menu</a>
    <a href="#">Sub Menu</a>
  </div>
  <a href="#" data-id="sub4">Menu Item</a>
  <div class="submenu" id="sub4">
    <a href="#">Sub Menu</a>
    <a href="#">Sub Menu</a>
    <a href="#">Sub Menu</a>
    <a href="#">Sub Menu</a>
  </div>
</div>

Answer 3

保留范围内的锚点和下拉列表，并在范围上添加相对类而不是锚点。

也修改了此样式

#menu>a,
#menu>span,
#submenu>a {
  width: 100px;
  line-height: 40px;
  text-align: center;
  background-color: rgb(238, 238, 238);
  border-right: 1px solid black;
}

* {
  box-sizing: border-box
}

a {
  text-decoration: none
}

body {
  font-family: Calibri;
  padding-top: 30px;
}

#menu {
  border: 1px solid red;
  padding: 10px;
  display: flex;
  flex-flow: row nowrap;
}

#menu>span {
  position: relative;
}

#menu>a,
#menu>span,
#submenu>a {
  width: 100px;
  line-height: 40px;
  text-align: center;
  background-color: rgb(238, 238, 238);
  border-right: 1px solid black;
}

#menu>a:hover,
#submenu>a:hover {
  background-color: #fff;
}

#submenu {
  display: flex;
  flex-flow: column nowrap;
  position: absolute;
  top: 40px;
}

<div id="menu">
  <a href="#">Menu Item</a>
  <a href="#">Menu Item</a>
  <span>
      <a href="#">Menu Item</a>
      <span id="submenu">
          <a href="#">Sub Menu</a>
          <a href="#">Sub Menu</a>
          <a href="#">Sub Menu</a>
          <a href="#">Sub Menu</a>
      </span>
  </span>
  <a href="#">Menu Item</a>
</div>

相对定位的父母不能作为绝对定位的孩子的锚

3 个答案: