Question

我正在尝试在下拉菜单中使用过渡效果，并使用display: none停止发生过渡，因此我使用不透明度。

一件奇怪的事情正在发生。当鼠标悬停在透明子菜单上时，它会变得可见，但是当我将鼠标放在父<li>上时，我选择了这种行为。孩子''绝对位于它下面。

在下面的代码段中，将鼠标移到post下方，将显示子菜单。我只希望当鼠标位于黑色边框中的邮箱顶部时显示。

这里有些事我不明白。

menu-main-menu-container {
  position: relative;
}

ul.menu {
  background: lightblue;
  padding: 0;
}
ul.menu > li {
  border: 1px solid black;
  position: relative;
  display: inline-block;
  height: 30px;
  padding-right: 20px;
  padding-left: 20px;
}
ul.menu > li > ul.sub-menu {
  top: 100%;
}
ul.menu li.menu-item-has-children:hover > ul.sub-menu {
  opacity: 1;
}

ul.sub-menu {
  padding: 0;
  left: 0;
  list-style: none;
  transition: all 1s ease;
  position: absolute;
  opacity: 0;
  background-color: lightyellow;
}
ul.sub-menu ul.sub-menu {
  left: 100%;
  top: 0;
  background-color: grey;
}
ul.sub-menu li {
  position: relative;
  padding: 20px;
}

<div class="menu-main-menu-container">
  <ul id="menu-main-menu" class="menu">
    <li id="menu-item-2385" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-2385 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/">Home</a></li>
    <li id="menu-item-2386" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2386 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/get-quote-inner/">testimonials</a></li>
    <li id="menu-item-2387" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2387 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/services-inner/">Login</a></li>
    <li id="menu-item-2388" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-2388 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/blog-post-8/">post</a>
      <ul class="sub-menu">
        <li id="menu-item-2646" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2646 menu-item-depth-1"><a href="http://site3.wpmu-subdomain.dev/gallery/">Gallery</a></li>
        <li id="menu-item-2647" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2647 menu-item-depth-1"><a href="http://site3.wpmu-subdomain.dev/services/">Services</a>
          <ul class="sub-menu">
            <li id="menu-item-2390" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2390 menu-item-depth-2"><a href="http://site3.wpmu-subdomain.dev/product/this-is-a-product/">product</a></li>
            <li id="menu-item-2649" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2649 menu-item-depth-2"><a href="http://site3.wpmu-subdomain.dev/login/">Login</a></li>
          </ul>
        </li>
        <li id="menu-item-2648" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2648 menu-item-depth-1"><a href="http://site3.wpmu-subdomain.dev/contactus/">Contactus</a></li>
      </ul>
    </li>
    <li id="menu-item-2389" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2389 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/service-fence-inner/">page</a></li>
    <li id="menu-item-2391" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2391 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/expert/gagan-goraya/">expert</a></li>
  </ul>
</div>

当我检查<li>时，它没有调整绝对定位<ul>的孩子，那为什么会触发li:hover效果？

Answer 1

更改不透明度只会改变用户的实际可见度。

浏览器和DOM都将呈现元素。使用了元素的空间，这对你来说是不可见的。

一个简单的解决方法是将max-height设置为0并将其更改为您在悬停时永远无法访问的内容。通过这种方式，它通常占用的空间限制为0.同时调节溢出也会有所帮助。

menu-main-menu-container {
  position: relative;
}

ul.menu {
  background: lightblue;
  padding: 0;
}
ul.menu > li {
  border: 1px solid black;
  position: relative;
  display: inline-block;
  height: 30px;
  padding-right: 20px;
  padding-left: 20px;
}
ul.menu > li > ul.sub-menu {
  top: 100%;
}
ul.menu li.menu-item-has-children:hover > ul.sub-menu {
  opacity: 1;
  max-height: 1000px;
  overflow: visible;
}

ul.sub-menu {
  padding: 0;
  left: 0;
  list-style: none;
  transition: all 1s ease;
  position: absolute;
  opacity: 0;
  max-height: 0px;
  overflow: hidden;
  background-color: lightyellow;
}
ul.sub-menu ul.sub-menu {
  left: 100%;
  top: 0;
  background-color: grey;
  max-height: 1000px;
}
ul.sub-menu li {
  position: relative;
  padding: 20px;
}

<div class="menu-main-menu-container">
  <ul id="menu-main-menu" class="menu">
    <li id="menu-item-2385" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-2385 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/">Home</a></li>
    <li id="menu-item-2386" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2386 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/get-quote-inner/">testimonials</a></li>
    <li id="menu-item-2387" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2387 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/services-inner/">Login</a></li>
    <li id="menu-item-2388" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-2388 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/blog-post-8/">post</a>
      <ul class="sub-menu">
        <li id="menu-item-2646" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2646 menu-item-depth-1"><a href="http://site3.wpmu-subdomain.dev/gallery/">Gallery</a></li>
        <li id="menu-item-2647" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2647 menu-item-depth-1"><a href="http://site3.wpmu-subdomain.dev/services/">Services</a>
          <ul class="sub-menu">
            <li id="menu-item-2390" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2390 menu-item-depth-2"><a href="http://site3.wpmu-subdomain.dev/product/this-is-a-product/">product</a></li>
            <li id="menu-item-2649" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2649 menu-item-depth-2"><a href="http://site3.wpmu-subdomain.dev/login/">Login</a></li>
          </ul>
        </li>
        <li id="menu-item-2648" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2648 menu-item-depth-1"><a href="http://site3.wpmu-subdomain.dev/contactus/">Contactus</a></li>
      </ul>
    </li>
    <li id="menu-item-2389" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2389 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/service-fence-inner/">page</a></li>
    <li id="menu-item-2391" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2391 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/expert/gagan-goraya/">expert</a></li>
  </ul>
</div>

Answer 2

尝试使用它。

通过课程子菜单看到孩子ul是li的一部分，并且菜单项为子项，所以如果你将鼠标悬停在li下面，它会认为是li被徘徊。

ul.menu > li.menu-item-has-children a:hover + ul.sub-menu {
opacity: 1;
}

将鼠标悬停在子元素

2 个答案: