使绝对元素位于相对元素的正下方

Question

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

我希望当悬停在 PORTFOLIO link 上方时，下拉导航直接显示在下方，它目前显示在右侧。

样式和其他内容稍后会出现，我希望在继续之前对这一点进行排序。

<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

您需要更改几项内容：

您需要将您的 .sub-hover 放在投资组合 <li> 的内部，而不是外部。
当悬停 .submenu 时显示您的 .sub-hover div。您可以使用 CSS 兄弟选择器 ~.
当 div 悬停时显示您的 .sub-hover div。
在您的 .sub-hover div 中，使用填充而不是边距，这样当您将鼠标从标题移动到下拉菜单时 div 不会消失。

CSS

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

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

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

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

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

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

使绝对元素位于相对元素的正下方

Make absolute element sit directly below relative element

html

css

position