使绝对元素直接位于相对元素下方

Question

我正在构建一个在悬停时激活的下拉导航栏。

我希望下拉导航功能在悬停时直接显示在PORTFOLIO链接下，它当前显示在右侧。

造型以及之后不会发生的事情，我希望在进行之前对这一点进行排序。

<div class="twelve columns">
          <ul class="navigation six columns offset-by-three">
              <li><a href="#">HOME</a></li>
              <li><a href="#" class="submenu">PORTFOLIO</a></li>
                <div class="sub-hover">
                    <a href="">Photos</a>
                    <a href="">Physical</a>
                    <a href="">Write</a>
                    <a href="">Studies</a>
                </div>
              <li><a href="#">ABOUT</a></li>
              <li><a href="#">CONTACT</a></li>
          </ul>
      </div>

.navigation {
    display: flex;
    flex-direction: row;
    justify-content: center;
    
}

.navigation li {
    display: inline-block;
    padding: 10px 20px;
}

.submenu {
    position: relative
}

.sub-hover {
    position: absolute;
    display:;
    margin-top: 25px;
    padding: 5px 10px;
    
}

.sub-hover a {
    display: block;
}

.submenu:hover .sub-hover {
    display: block;
}

Answer 1

您需要更改几件事：

1. 您需要将.sub-hover置于投资组合<li>内，而不是放在其中。
2. 在.sub-hover悬停时显示您的.submenu div。您可以使用CSS同级选择器~完成此操作。
3. 当div本身悬停时显示您的.sub-hover div。
4. 在.sub-hover div中，使用填充而不是边距，这样当您将鼠标从标题移动到下拉列表时，div就不会消失。

<强> CSS

.sub-hover {
    padding-top: 25px;
}

.submenu:hover ~ .sub-hover {
    display: block;
}

.sub-hover:hover {
    display: block;
}

＆＃13;
＆＃13;
.navigation {
    display: flex;
    flex-direction: row;
    justify-content: center;
    
}

.navigation li {
    display: inline-block;
    padding: 10px 20px;
}

.submenu {
    position: relative
}

.sub-hover {
    position: absolute;
    display:;
    padding-top: 25px;
    padding: 5px 10px;
    display: none; 
}

.submenu:hover ~ .sub-hover {
  display: block;
}

.sub-hover:hover {
  display: block;
}

.sub-hover a {
    display: block;
}

.submenu:hover .sub-hover {
    display: block;
}
＆＃13;
<div class="twelve columns">
          <ul class="navigation six columns offset-by-three">
              <li><a href="#">HOME</a></li>
              <li><a href="#" class="submenu">PORTFOLIO</a>
                  <div class="sub-hover">
                    <a href="">Photos</a>
                    <a href="">Physical</a>
                    <a href="">Write</a>
                    <a href="">Studies</a>
                  </div>
              </li>
              <li><a href="#">ABOUT</a></li>
              <li><a href="#">CONTACT</a></li>
          </ul>
      </div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

这需要稍微调整一下你的标记，但处理这个问题的常用方法可归结为

<ul class="navigation">
    <li>
        <a>main menu item 1</a>
    <li>
        <a>main menu item 2</a>
        <ul>
            <li>
                <a>drop down 1 under menu item 2</a>
            </li>
            <li>
                <a>drop down 2 under menu item 2</a>
            </li>
        </ul>
    <li>
</ul>

和

.navigation {
    list-style: none
}
.navigation li {
    display: inline-block;
    position: relative;// required for positioning the dropdown relative to the parent menu item
}
.navigation li li {
    display: block
}
.navigation ul {
    display: none;
    position: absolute;
    top: 100%;// makes the dropdown "hang" from the menu
    left: 0;// tweak as needed
    width: 100px;//some value required here
}
.navigation li:hover ul {
    display: block
}

问题的关键是将下拉列表放在主菜单项中，制作主菜单项position: relative，然后制作下拉列表position: absolute; top: 100%; width: something和left: something或right: something