Question

这是我生成的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>

如原样显示时，将显示所有菜单选项。我想进行设置，以便仅显示顶层，然后将鼠标悬停在其上方，则显示第二层，最后，如果您查看第三层，则将鼠标悬停在具有第三层。

我使用的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>

Answer 1

我看到的最简单的解决方法是为您的第三层提供不同的类名。照原样，以.sub-menu为目标的CSS会影响第二层和第三层，您不希望这样。

但是，由于您无法编辑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>

隐藏第二层和第三层菜单，以便在悬停时显示

1 个答案: