时间戳

首页 > 解决方案 > 隐藏第 2 层和第 3 层菜单以在悬停时显示

html - 隐藏第 2 层和第 3 层菜单以在悬停时显示

问题描述

这是我生成的 HTML 和 CSS

//current menu css
.main-navigation {
  padding-top: 2px;

  ul {
    padding: 0;
    margin: 0;
  }

  ul:before,
  ul:after {
    content: " ";
    display: table;
  }

  ul:after {
    clear: both;
  }

  @mixin atMedium {
    float: left;
    margin-right: 20px;
  }
}

.main-navigation li {
  list-style: none;

  @mixin atMedium {
    float: left;
    padding-left: 20px;
  }
}

.main-navigation a {
  display: block;
  padding: 10px 20px;
  color: #FFF;
  text-decoration: none;
  font-weight: 300;
  @mixin atMedium {
    display: inline-block;
    padding: 0;
  }
}

.main-navigation .current-menu-item a, .main-navigation a:hover {
  color: $beige;
}

//what I added to try to create the dropdown
.sub-menu {
  display: none;
  visibility: hidden;
  opacity: 0;
}

#menu-main-menu li:hover .sub-menu {
  display: none;
  visibility: hidden;
  opacity: 0;
}

我的html：

<nav class="main-navigation">
  <div class="menu-main-menu-container">
    <ul id="menu-main-menu" class="menu">
      <li id="menu-item-52"><a href="#">Home</a></li>
      <li id="menu-item-65"><a href="#">Resources</a>
        <ul class="sub-menu">
          <li id="menu-item-60"><a href="#">Moving Tips</a></li>
          <li id="menu-item-64"><a href="#">Relocation Guide</a></li>
          <li id="menu-item-66"><a href="#">66</a>
            <ul class="sub-menu">
              <li id="menu-item-69"><a href="#">Why Should a Seller use a Real Estate Agent?</a></li>
              <li id="menu-item-62"><a href="#">Pricing Your Home</a></li>
              <li id="menu-item-63"><a href="#">Probate</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li id="menu-item-57"><a href="">Contact</a></li>
    </ul>
  </div>
</nav>

当它显示为所有菜单选项时。我想设置它，所以只有顶层显示，然后如果你将鼠标悬停在它上面，第二层会显示出来，最后如果你查看有第三层，如果你将鼠标悬停在有其中第 3 层。

我使用的 css 适用于第二级。但问题是，当我将鼠标悬停在第二级项目上时，所有子菜单都会再次显示。我想我只需要单独定位子菜单的第二级版本，但我不确定这是否是正确的做法，或者我是否只是错过了一些东西。

这是由 Wordpress 生成的实际菜单 HTML：

<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="menu">
    <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-52"><a href="http://calibre.local/">IdaHome</a></li>
    <li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-65"><a href="http://calibre.local/resources/">Resources</a>
        <ul class="sub-menu">
            <li id="menu-item-60" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-37 current_page_item menu-item-60"><a href="http://calibre.local/moving-tips/" aria-current="page">Moving Tips</a></li>
            <li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-64"><a href="http://calibre.local/relocation-guide/">Relocation Guide</a></li>
            <li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-66"><a href="http://calibre.local/sellers/">Sellers</a>
            <ul class="sub-menu">
                <li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-69"><a href="http://calibre.local/why-should-a-seller-use-a-real-estate-agent/">Why Should a Seller use a Real Estate Agent?</a></li>
                <li id="menu-item-62" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-62"><a href="http://calibre.local/pricing-your-home/">Pricing Your Home</a></li>
                <li id="menu-item-63" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-63"><a href="http://calibre.local/probate/">Probate</a></li>
            </ul>
        </li>
            <li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-54"><a href="http://calibre.local/buyers/">Buyers</a>
            <ul class="sub-menu">
                <li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68"><a href="http://calibre.local/why-should-a-buyer-use-a-real-estate-agent/">Why Should a Buyer use a Real Estate Agent?</a></li>
                <li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55"><a href="http://calibre.local/buying-a-short-sale-property/">Buying a Short Sale Property</a></li>
                <li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"><a href="http://calibre.local/closing-costs/">Closing Costs</a></li>
            </ul>
        </li>
            <li id="menu-item-67" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67"><a href="http://calibre.local/short-sale-and-foreclosures/">Short Sale and Foreclosures</a></li>
        </ul>
    </li>
    <li id="menu-item-70" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-70"><a href="#">Communities</a>
    <ul class="sub-menu">
        <li id="menu-item-58" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58"><a href="http://calibre.local/home-school-information/">Home School Information</a></li>
        <li id="menu-item-71" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-71"><a href="#">Things to do</a></li>
    </ul>
    </li>
    <li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53"><a href="http://calibre.local/about-josh/">About Josh</a></li>
    <li id="menu-item-61" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-61"><a href="http://calibre.local/news/">News</a></li>
    <li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57"><a href="http://calibre.local/contact/">Contact</a></li>
</ul>
</div>

标签： htmlcsswordpressdrop-down-menu

解决方案

我能看到解决这个问题的最简单方法是给你的第三层一个不同的类名。照原样，css 定位.sub-menu将影响第二层和第三层，而您不希望这样。

但是，由于您无法编辑 wordpress css，因此这里有一个无需添加额外类即可工作的解决方案：

见片段

nav ul {
  list-style: none;
}

.sub-menu {
  display: none;
}


#menu-main-menu li:hover .sub-menu {
  display: block;
}

#menu-main-menu li:hover .sub-menu li ul {
  display: none;
}

#menu-main-menu li:hover .sub-menu li:hover ul {
  display: block;
}

#menu-main-menu {
  display: block;
  opacity: 1;
}
<nav class="main-navigation">
  <div class="menu-main-menu-container">
    <ul id="menu-main-menu" class="menu">
      <li id="menu-item-52"><a href="#">Home</a></li>
      <li id="menu-item-65"><a href="#">Resources</a>
        <ul class="sub-menu">
          <li id="menu-item-60"><a href="#">Moving Tips</a></li>
          <li id="menu-item-64"><a href="#">Relocation Guide</a></li>
          <li id="menu-item-66"><a href="#">66</a>
            <ul class="sub-sub-menu">
              <li id="menu-item-69"><a href="#">Why Should a Seller use a Real Estate Agent?</a></li>
              <li id="menu-item-62"><a href="#">Pricing Your Home</a></li>
              <li id="menu-item-63"><a href="#">Probate</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li id="menu-item-57"><a href="">Contact</a></li>
    </ul>
  </div>
</nav>

推荐阅读