CSS和HTML-下拉菜单下推内容-位置：相对和绝对不起作用

Question

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

这是我上传所有内容的 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 中的所有斜杠，因为它们会使其无效，从而导致无法应用它们之后的下一个样式块。
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/。