html - CSS 和 HTML-下拉菜单下推内容--位置 : relative and absolute not working

Question

我正在尝试使用我的 wordpress HTML 来设计我创建的导航菜单的样式。我已经建立了 :hover 东西，并且下拉菜单就位了。当悬停在我的网站上时，它会下推我网站上的内容。我尝试了 z-index 修复以及 position: relative; 和 position: absolute;。如果我使用相对和绝对位置固定，下拉菜单会做这种奇怪的事情，背景颜色消失，我所有的子菜单 ul 都堆叠在一起。关于原因有什么建议吗？

这是我将所有内容上传到的 JSfiddle。 https://jsfiddle.net/alexisrambles/j0935on2/10/

这是我目前得到的 CSS。

#menu-apl {

  background-color: #63afe6;
  width: 100%;

}

li.dropdown {

  list-style: none;
  background-color: #63afe6;
  float: left;
  color: white;
}

li a {

  display: block;
  color: white;
  text-align: center;
  margin: 10px;
  padding-left: 25px;
  padding-right: 25px;
  text-decoration: none;

}


//////////////



.dropdown {

  display: inline-block;
  background-color: #63afe6;

}

.dropdown-item {

  display: none;
  width: 200px;
  list-style: none;


}


.dropdown:hover .dropdown-item {

  display: block;

}

<div class="elementor-widget-wrap">
  <div class="elementor-element elementor-element-b46d8b5 elementor-widget elementor-widget-wp-widget-nav_menu" data-id="b46d8b5" data-element_type="widget" data-widget_type="wp-widget-nav_menu.default">
    <div class="elementor-widget-container">
      <div class="menu-apl-container">
        <ul id="menu-apl" class="menu">
          <li id="menu-item-806" class="dropdown menu-item menu-item-type-post_type menu-item-object-page menu-item-806">
            <a href="https://www.alexisrichard.com/home/">Home</a>
          </li>
          <li id="menu-item-790" class="dropdown menu-item menu-item-type-post_type menu-item-object-page <menu-item-has->                  </menu-item-has->children menu-item-790">
            <a href="https://www.alexisrichard.com/about/">About</a>
            <ul class="sub-menu">
              <li id="menu-item-793" class="dropdown-item menu-item menu-item-type-post_type 
          <menu-item-object->    </menu-item-object->page menu-item-793">
                <a href="https://www.alexisrichard.com/employment/">Employment</a></li>
              <li id="menu-item-791" class="dropdown-item menu-item menu-item-type-post_type <menu-item-object->  </menu-item-object->page menu-item-791">
                <a href="https://www.alexisrichard.com/library-board/">Library Board</a></li>
              <li id="menu-item-792" class="dropdown-item menu-item menu-item-type-post_type menu-item-object-page menu-item-792">
                <a href="https://www.alexisrichard.com/friends-of-the-library/">Friends of the Library</a> </li>
            </ul>
          </li>
          <li id="menu-item-795" class="dropdown menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-795"><a href="https://www.alexisrichard.com/services/">Services</a>
            <ul class="sub-menu">
              <li id="menu-item-804" class="dropdown-item menu-item menu-item-type-post_type menu-item-object-page menu-item-804"><a href="https://www.alexisrichard.com/request-a-book/">Request a Book</a></li>
              <li id="menu-item-803" class="dropdown-item menu-item menu-item-type-post_type menu-item-object-page menu-item-803"><a href="https://www.alexisrichard.com/calendar/">Calendar</a></li>
              <li id="menu-item-802" class="dropdown-item menu-item menu-item-type-post_type menu-item-object-page menu-item-802"><a href="https://www.alexisrichard.com/meeting-room-policy/">Meeting Room Policy</a></li>
              <li id="menu-item-801" class="dropdown-item menu-item menu-item-type-post_type menu-item-object-page menu-item-801"><a href="https://www.alexisrichard.com/interlibrary-loan/">Interlibrary Loan</a></li>
              <li id="menu-item-800" class="dropdown-item menu-item menu-item-type-post_type menu-item-object-page menu-item-800"><a href="https://www.alexisrichard.com/fines-and-fees/">Fines and Fees</a></li>
              <li id="menu-item-799" class="dropdown-item menu-item menu-item-type-post_type menu-item-object-page menu-item-799"><a href="https://www.alexisrichard.com/ebook-catalog/">Ebook Catalog</a></li>
              <li id="menu-item-798" class="dropdown-item menu-item menu-item-type-post_type menu-item-object-page menu-item-798"><a href="https://www.alexisrichard.com/databases/">Databases</a></li>
              <li id="menu-item-797" class="dropdown-item menu-item menu-item-type-post_type menu-item-object-page menu-item-797"><a href="https://www.alexisrichard.com/card-catalog/">Card Catalog</a></li>
              <li id="menu-item-796" class="dropdown-item menu-item menu-item-type-post_type menu-item-object-page menu-item-796"><a href="https://www.alexisrichard.com/library-policies/">Library Policies</a></li>
            </ul>
          </li>
          <li id="menu-item-794" class="dropdown menu-item menu-item-type-post_type menu-item-object-page menu-item-794"><a href="https://www.alexisrichard.com/locations/">Locations</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 1

我清理了您的代码，从 HTML 中删除了与此问题无关的所有内容，以避免分心。然后我编辑了 CSS。

两件事:

1. 您需要删除 CSS 中的所有斜杠，因为它们会使它无效，从而导致无法应用它们之后的下一个样式 block 。
2. 要使相对/绝对定位组合正常工作，您需要确保定位正确。

之前，您关注的是菜单项本身——这就是您从 display: none 切换到 display: block 的原因，我怀疑您正在尝试这样做也绝对定位。如果您绝对定位所有菜单项并赋予它们所有样式，例如 top: 0; left: 0，它们将彼此重叠。相反，请尝试相对于其父列表项(即 li.dropdown)定位列表(即 ul.sub-menu)。

从那里，您可以使用直接兄弟选择器 + 来更改悬停时的样式。因此，当您将鼠标悬停在一个链接上时，子菜单会在它出现后立即出现。

为确保您能真正看到它的实际效果，最后要做的是为下拉菜单设置背景色，所以我在下面也这样做了。

#menu-apl {
  background-color: #63afe6;
  width: 100%;
}
li a {
  display: block;
  color: white;
  text-align: center;
  margin: 10px;
  padding-left: 25px;
  padding-right: 25px;
  text-decoration: none;
}
.dropdown {
  list-style: none;
  background-color: #63afe6;
  float: left;
  display: inline-block;
  color: white;
  background-color: #63afe6;
  position: relative;
}
.dropdown-item {
  width: 200px;
  list-style: none;
}
.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #63afe6;
}
.dropdown a:hover + .sub-menu {
  display: block;
}

<ul class="menu">
  <li class="dropdown"><a href="https://www.alexisrichard.com/home/">Home</a></li>
  <li class="dropdown">
    <a href="https://www.alexisrichard.com/about/">About</a>
    <ul class="sub-menu">
      <li class="dropdown-item"><a href="https://www.alexisrichard.com/employment/">Employment</a></li>
      <li class="dropdown-item"><a href="https://www.alexisrichard.com/library-board/">Library Board</a></li>
      <li class="dropdown-item"><a href="https://www.alexisrichard.com/friends-of-the-library/">Friends of the Library</a></li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="https://www.alexisrichard.com/services/">Services</a>
    <ul class="sub-menu">
      <li class="dropdown-item"><a href="https://www.alexisrichard.com/request-a-book/">Request a Book</a></li>
      <li class="dropdown-item"><a href="https://www.alexisrichard.com/calendar/">Calendar</a></li>
      <li class="dropdown-item"><a href="https://www.alexisrichard.com/meeting-room-policy/">Meeting Room Policy</a></li>
      <li class="dropdown-item"><a href="https://www.alexisrichard.com/interlibrary-loan/">Interlibrary Loan</a></li>
      <li class="dropdown-item"><a href="https://www.alexisrichard.com/fines-and-fees/">Fines and Fees</a></li>
      <li class="dropdown-item"><a href="https://www.alexisrichard.com/ebook-catalog/">Ebook Catalog</a></li>
      <li class="dropdown-item"><a href="https://www.alexisrichard.com/databases/">Databases</a></li>
      <li class="dropdown-item"><a href="https://www.alexisrichard.com/card-catalog/">Card Catalog</a></li>
      <li class="dropdown-item"><a href="https://www.alexisrichard.com/library-policies/">Library Policies</a></li>
    </ul>
  </li>
  <li class="dropdown"><a href="https://www.alexisrichard.com/locations/">Locations</a></li>
</ul>

在 JSFiddle 上:https://jsfiddle.net/e9zsp7t1/ .