当用户悬停我的子菜单时，菜单会显示。我希望子导航仅在主导航系统悬停时显示。
例如，当＆＃34;关于＆＃34;徘徊，它应该显示＆＃34;我，我们和他们。＆＃34;但我永远不能徘徊＆＃34;我，我们，或他们＆＃34;没有徘徊＆＃34;关于＆＃34;。一旦＆＃34;关于＆＃34;徘徊，你应该能够徘徊＆＃34;我，我们和他们＆＃34;它们不会再消失。
li, ul {
list-style: none;
}
.navigation-bar {
width: 100%;
display: table;
}
.navigation-bar > ul {
display: table-cell;
cursor: default;
}
.navigation-bar > ul > li {
width: 10px;
cursor: pointer;
visibility:hidden;
opacity:0;
transition:visibility 0s linear 0.5s, opacity 0.5s linear;
}
.navigation-bar > ul:hover > li {
visibility:visible;
opacity:1;
transition-delay:0s;
}<li class="navigation-bar">
<ul>About
<li>Me</li>
<li>Us</li>
<li>Them</li>
</ul>
<ul>Find
<li>Me</li>
<li>Us</li>
<li>Them</li>
</ul>
<ul>Shop
<li>Shirts</li>
<li>Pants</li>
<li>Hats</li>
</ul>
<ul>Contact
<li>Me</li>
<li>Us</li>
<li>Them</li>
</ul>
</li>
我不太确定如何问这个问题。我希望你能理解这个问题。
答案 0 :(得分：1)
我想我理解你的问题，我将尽力回答。
根据我所看到的情况，你看起来有一个错误的悬停区域。原因是你使用：悬停在ul上，结构看起来不对。
首先，.navigation-bar只是一个没有任何包装ul的li。这是一个错误，它应该是ul，菜单应该是li，然后下拉菜单应该是ul和li
你也在使用table-cell，它给了li很多宽度，这就是为什么有一个错误的可点击区域。
我已经创建了代码，请看一下，我在我的计算机上试过它并且工作正常
<ul class="navigation-bar">
<li><a href="#">About</a>
<ul>
<li><a href="#">Me</a></li>
<li><a href="#">Us</a></li>
<li><a href="#">Them</a></li>
</ul>
</li>
<li><a href="#">Find</a>
<ul>
<li><a href="#">Me</a></li>
<li><a href="#">Us</a></li>
<li><a href="#">Them</a></li>
</ul>
</li>
<li><a href="#">Shop</a>
<ul>
<li><a href="#">Me</a></li>
<li><a href="#">Us</a></li>
<li><a href="#">Them</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">Me</a></li>
<li><a href="#">Us</a></li>
<li><a href="#">Them</a></li>
</ul>
</li>
</ul>
li, ul {
list-style: none;
}
.navigation-bar {
width: 100%;
margin:0;
padding:0;
}
.navigation-bar:after{
clear:both;
content:'';
display:block;
}
.navigation-bar > li {
float:left;
position:relative;
margin-right:5%;
}
.navigation-bar > li > ul {
opacity:0;
transition:visibility 0s linear 0.5s, opacity 0.5s linear;
position:absolute;
top::0;
left:0;
margin:0;
padding:0;
visibility:hidden;
}
.navigation-bar > li:hover > ul {
opacity:1;
transition-delay:0s;
visibility:visible;
}
您可以根据自己的要求进行其他更改。
再次请注意我根据我的理解回答了这个问题，如果我错了，请原谅我并再次解释，以便我会更好地回答
答案 1 :(得分：1)
首先，你的HTML和CSS有点傻。
但实际问题是visibility: hidden并不会阻止您的子菜单获取鼠标事件。
编辑：刚刚注意到你有淡化效果。这使事情变得更复杂，因为你无法转换到display: none或从<nav>
<span>
<a href="#">About</a>
<menu>
<a href="#">Me</a>
<a href="#">Us</a>
<a href="#">Them</a>
</menu>
</span>
<span>
<a href="#">Find</a>
<menu>
<a href="#">Me</a>
<a href="#">Us</a>
<a href="#">Them</a>
</menu>
</span>
<span>
<a href="#">Shop</a>
<menu>
<a href="#">Shirts</a>
<a href="#">Pants</a>
<a href="#">Hats</a>
</menu>
</span>
<span>
<a href="#">Contact</a>
<menu>
<a href="#">Me</a>
<a href="#">Us</a>
<a href="#">Them</a>
</menu>
</span>
</nav>
过渡。 Kyojimaru建议使用max-height属性进行黑客攻击，如果您关心旧浏览器，这是最佳选择。
这样做的现代方法（如下所示）就是使用pointer-events属性。确保在使用前检查support for pointer-events。如果您的网站需要使用IE10及更低版本，最好使用Kyojimaru’s hack。
HTML：
/* Layout
------------------------------------------- */
nav {
display: flex;
justify-content: space-around;
}
nav menu {
position: absolute;
z-index: 1; /* display menu above any page content */
}
nav menu a {
display: block;
}
/* Aesthetics
------------------------------------------- */
nav a {
text-decoration: none;
color: initial;
}
/* Interaction
------------------------------------------- */
nav menu {
opacity: 0;
transition: opacity 0.5s;
pointer-events: none;
}
nav span:hover menu {
opacity: 1;
pointer-events: all;
}
CSS：
{{1}}
演示： http://jsbin.com/seqoqi/9/edit?html,css,output
如果您有任何疑问，请与我们联系。 ：）
答案 2 :(得分：1)
这都是因为你正在使用visibility: hidden。这与display: none不会产生相同的效果，这会将element从流程中完全删除。
使用visibility: hidden时，element仍然会在那里，但您无法看到它，所以当它被隐藏时，li仍将与auto height在一起}，如果您将鼠标悬停在:hover上，这会导致它触发ul上的hidden li，因为li是child ul的{{1}} }，如果您hover超过li，则表示您hover超过ul并导致您遇到的问题。
解决此问题的方法是使用display: none和display: block，如Sanjeev所回答，但它不会有fade effect。
如果您仍然拥有fade effect，则可以在不悬停时将max-height的{{1}}设置为0，并在悬停时将其设置为远离元素的位置高度，如li或更高。
以下是Fiddle如何使用1000px来保存max-height
*注意：正如Zaqk所述，fade effect不是实现display: table-cell的正确方法，您可以将其更改为UI Zaqk here。
display: inline-blockli, ul {
list-style: none;
}
.navigation-bar {
width: 100%;
display: table;
}
.navigation-bar > ul {
display: table-cell;
cursor: default;
}
.navigation-bar > ul > li {
width: 10px;
cursor: pointer;
visibility:hidden;
opacity:0;
transition:visibility 0s linear 0.5s, opacity 0.5s linear, max-height 0.5s linear;
max-height: 0;
}
.navigation-bar > ul:hover > li {
visibility:visible;
opacity:1;
transition-delay:0s;
max-height: 100px;
}
答案 3 :(得分：0)
您的代码中的问题是您不应在 .navigation-bar＆gt;中使用 visiblity：hidden 。 ul＆gt;利即可。
使用它只会使您的列表项（<li></li>）不可见
您应该使用 display：none 和 display：block
请参阅修改后的代码段，该代码段正如您所期望的那样工作。
li, ul {
list-style: none;
}
.navigation-bar {
width: 100%;
display: table;
}
.navigation-bar > ul {
display: table-cell;
cursor: default;
}
.navigation-bar > ul > li {
width: 10px;
cursor: pointer;
display:none;
opacity:0;
transition:visibility 0s linear 0.5s, opacity 0.5s linear;
}
.navigation-bar > ul:hover > li {
display:block;
opacity:1;
transition-delay:0s;
}<li class="navigation-bar">
<ul>About
<li>Me</li>
<li>Us</li>
<li>Them</li>
</ul>
<ul>Find
<li>Me</li>
<li>Us</li>
<li>Them</li>
</ul>
<ul>Shop
<li>Shirts</li>
<li>Pants</li>
<li>Hats</li>
</ul>
<ul>Contact
<li>Me</li>
<li>Us</li>
<li>Them</li>
</ul>
</li>