javascript - 我的子菜单在 WordPress 中悬停时未显示

Question

我在我的 WordPress 网站上工作，我也添加了子菜单，但问题是我的子菜单没有在点击和悬停时显示。

这是我的 HTML :

<li id="menu-item-77" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-77">
<a href="#">Products<i class="fa fa-caret-right"></i></a>
<ul class="sub-menu">
<li></li>
<li></li>
</ul>
</li>

在这种情况下，子菜单部分不会在悬停或单击时显示。

这是我的 CSS:

.nav-header ul > li.menu-item-object-product_cat.menu-item-has-children:hover > ul.sub-menu {
position: absolute;
display: contents;
background: #fff;
border: 1px solid #eee;
}

我已尝试添加 CSS 来显示子菜单，子菜单正在显示，但 UI 不正确。

非常感谢任何帮助。

Answer 1

尽可能多地尝试复制网站上的内容。

据我所知，sub-menu 嵌套在另一个 sub-menu

我将这些行添加到您的 css 中。

ul.sub-menu  > li{
  position: relative;
}
ul.sub-menu  > li > ul.sub-menu{
  position: absolute;
  left: 100%;
  width: auto;
  white-space: nowrap;
  top: 0;
  display: none;
}
ul.sub-menu  > li:hover > ul.sub-menu{
  display: contents;
}
ul.sub-menu > li > ul.sub-menu li a {
   padding: 10px 20px 10px 0;
}
ul.sub-menu  > li:hover > ul.sub-menu {
    display: block;
}

希望这接近您希望达到的结果。

a{
text-decoration: none;
}

.nav-header > ul {
    clear: both;
    font-size: 14px;
    line-height: 1;
    width: 100%;
}
.menu {
    background: transparent;
}
.menu, .menu ul, .menu ul li, .menu ul li ul, .menu ul li ul li, .menu a, .menu ul li a, .menu ul li ul li a, ul.menu > li:hover {
    background: none;
    padding: 0px;
    margin: 0px;
    height: auto;
    line-height: auto;
}

.nav-header > ul > li {
    display: inline-block;
    text-align: left;
}
li {
    list-style-type: none;
}
*, input[type="search"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.nav-header > ul > li:last-child a {
    padding-right: 0;
}
.nav-header > ul > li > a {
    color: #003764;
    font-weight: bold;
    padding: 28px 18px;
        padding-right: 18px;
    border-bottom: 5px solid #fff;
    text-transform: uppercase;
}
.nav-header a {
    display: block;
}

.nav-header > ul > li.menu-item-has-children > ul.sub-menu {
    display: none;
}
.nav-header ul.sub-menu {
    position: absolute;
    background: #fff;
    border: 1px solid #eee;
}

.nav-header > ul > li > ul.sub-menu > li {
    margin: 0;
    display: block;
}
ul.sub-menu > li {
    position: relative;
}
.widget li li {
    border: none;
    margin: 0 0 0 30px;
    padding: 0;
}

.nav-header > ul > li > ul.sub-menu > li > a {
    display: block;
    color: #003764;
    background-color: #fff;
    border: none;
    font-size: 14px;
    padding: 10px;
    position: relative;
    width: auto;
}

.nav-header > ul  > li.menu-item-has-children:hover > ul.sub-menu {
    display: block;
}
ul.sub-menu  > li{
  position: relative;
}
ul.sub-menu  > li > ul.sub-menu{
  position: absolute;
  left: 100%;
  width: auto;
  white-space: nowrap;
  top: 0;
  display: none;
}
ul.sub-menu  > li:hover > ul.sub-menu{
  display: contents;
}
ul.sub-menu > li > ul.sub-menu li a {
   padding: 10px 20px 10px 0;
}
ul.sub-menu  > li:hover > ul.sub-menu {
    display: block;
}

<section id="nav_menu-2" class="widget widget_nav_menu">
  <div class="widget-wrap">
    <nav class="nav-header">
      <ul id="menu-top-header" class="menu genesis-nav-menu">
        <li id="menu-item-77" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-77"><a href="#">Products<i class="fa fa-caret-right"></i></a>
          <ul class="sub-menu">
            <li id="menu-item-63" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-63"><a href="https://www.cityclean.ca/products/">All Products</a></li>
            <li id="menu-item-246" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-246"><a href="https://www.cityclean.ca/product-category/anti-fatigue-mats/">Anti-Fatigue Mats<i class="fa fa-caret-right"></i></a>
              <ul class="sub-menu">
                <li id="menu-item-1035" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-1035"><a href="https://www.cityclean.ca/product/comfort-flow-mats/">Comfort Flow Mats</a></li>
                <li id="menu-item-1036" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-1036"><a href="https://www.cityclean.ca/product/complete-comfort-mats/">Complete Comfort Mats</a></li>
              </ul>
            </li>
            <li id="menu-item-245" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-245"><a href="https://www.cityclean.ca/product-category/traditional-mats/">Traditional Mats<i class="fa fa-caret-right"></i></a>
              <ul class="sub-menu">
                <li id="menu-item-1031" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-1031"><a href="https://www.cityclean.ca/product/superscrape-mats/">SuperScrape Mats</a></li>
                <li id="menu-item-1032" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-1032"><a href="https://www.cityclean.ca/product/water-hog/">Water Hog</a></li>
                <li id="menu-item-1034" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-1034"><a href="https://www.cityclean.ca/product/brush-mats/">Brush Mats</a></li>
                <li id="menu-item-1033" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-1033"><a href="https://www.cityclean.ca/product/classic-mats/">Classic Mats</a></li>
              </ul>
            </li>
            <li id="menu-item-250" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-250"><a href="https://www.cityclean.ca/product/message-mats/">Message Mats</a></li>
            <li id="menu-item-248" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-248"><a href="https://www.cityclean.ca/product-category/image-mats/">Image Mats<i class="fa fa-caret-right"></i></a>
              <ul class="sub-menu">
                <li id="menu-item-1037" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-1037"><a href="https://www.cityclean.ca/product/image-mats-classic-impressions/">Image Mats – Classic Impressions™</a></li>
                <li id="menu-item-1038" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-1038"><a href="https://www.cityclean.ca/product/image-mats-superscrape-impressions/">Image Mats – SuperScrape™ Impressions</a></li>
              </ul>
            </li>
            <li id="menu-item-453" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-453"><a href="https://www.cityclean.ca/product-category/specialty-mats/">Specialty Mats<i class="fa fa-caret-right"></i></a>
              <ul class="sub-menu">
                <li id="menu-item-1039" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-1039"><a href="https://www.cityclean.ca/product/cleanshield-urinal-mats/">Cleanshield Urinal Mats</a></li>
              </ul>
            </li>
            <li id="menu-item-251" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-251"><a href="https://www.cityclean.ca/facilities-services/">Facilities Services</a></li>
          </ul>
        </li>

      </ul>
    </nav>
  </div>
</section>