【问题标题】:CSS and HTML- Dropdown Menu Pushing Down Content-- Position: relative and absolute not workingCSS和HTML-下拉菜单下推内容-位置:相对和绝对不起作用
【发布时间】:2019-08-04 11:46:34
【问题描述】:

我正在尝试使用我的 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>

【问题讨论】:

    标签: html css drop-down-menu


    【解决方案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/

    【讨论】:

    • 天哪。太感谢了。我变得非常沮丧,我知道这可能是相当无害的。还要感谢您指出 :hover 应该在 .dropdown a 上,而不仅仅是 .dropdown。经验教训——如果你感到沮丧,你可能错过了一些相当明显的东西,哈哈。哦,那个直接兄弟选择器真的很有趣。也谢谢你——现在我也可以调查一下。
    • @AlexisRichard 乐于助人!如果您的问题得到解决,请考虑接受并支持此答案。
    猜你喜欢
    • 2021-08-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-09-06
    • 2011-02-09
    • 1970-01-01
    相关资源
    最近更新 更多