CSS 下拉菜单淡入不正确

Question

在下拉菜单中设置淡入淡出时遇到一些奇怪的问题 - 这是我的 CSS:

.main-navigation li ul li { 
 opacity:0; 
 transition:opacity 0.3s linear; 
 -webkit-transition:opacity 0.3s linear; 
 -moz-transition:opacity 0.3s linear; 
 -o-transition:opacity 0.3s linear; 
}

.main-navigation li:hover > ul li { 
     opacity:1; 
}

和 HTML(通过 WP 生成):

<nav id="site-navigation" class="main-navigation" role="navigation">
            <h3 class="menu-toggle">Menu</h3>
            <a class="assistive-text" href="#content" title="Skip to content">Skip to content</a>
            <div class="menu-nav-container"><ul id="menu-nav" class="nav-menu"><li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-10 current_page_item menu-item-23"></li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"></li>
<li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-24">
<ul class="sub-menu">
    <li id="menu-item-48" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48"></li>
    <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"></li>
    <li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-69"></li>
</ul>
</li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-27">
<ul class="sub-menu">
    <li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-66"></li>
    <li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65"></li>
    <li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-64"></li>
</ul>
</li>
<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-28">
<ul class="sub-menu">
    <li id="menu-item-63" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-63"></li>
    <li id="menu-item-62" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-62"></li>
    <li id="menu-item-61" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-61"></li>
</ul>
</li>
</ul></div>

当您滚动列表项时，子列表会正确淡入，但问题是:当您滚动到它们所在的区域时，它们也会淡入。我似乎无法解决它 - 谁有任何想法？

谢谢!

Answer 1

不透明度设置为 0 的元素仍然占据页面上的空间(除非您定位或 float 它们)，因此当您将鼠标悬停在子导航上时，实际上是在父导航上悬停 <li>导致动画运行。

有一个使用 visibility: hidden 的技巧和 position: absolute解决这个问题。作为额外的奖励，因为 visibility属性允许使用过渡(display 不允许)您可以制作平滑的淡出效果以及通过设置延迟淡入。

我会在你的子导航上设置样式 <ul>而不是子导航 <li>

.main-navigation li ul { 
  position: absolute; /* Take it out of the document flow */
  visibility:hidden;
  opacity:0;
  transition:visibility 0s linear 0.3s, opacity 0.3s linear;
}

.main-navigation li:hover > ul { 
  visibility:visible;
  opacity:1;
  transition-delay:0s;
}

可见性过渡延迟与不透明度过渡长度的长度相匹配，这意味着当您停止悬停时，在不透明度完成动画之前不会发生可见性。

Demo