新手CSS：下拉菜单显示没有菜单悬停？

我一直在尝试创建一个下拉菜单，并且在菜单悬停时出现下拉菜单时，它也显示出没有菜单悬停的情况。只要我将光标移动到应该出现下拉列表的位置，它就会出现。你知道我做错了什么，我该如何纠正？我希望我的意思是...

此外，我知道我的菜单的宽度扩大，因为我扩大窗口大小。请忽略它，它在我正在处理的主代码中没有这样做。

在此先感谢！

.top-menu>ul { 
 
    background-color: #78a1bb; 
 
    font-size: 150%; 
 
    padding-left: 0px; 
 
    padding-right: 0px; 
 
} 
 

 
.top-menu>ul>li { 
 
    list-style: none; 
 
    display: inline-block; 
 
    padding: 5px 124px; 
 
    position: relative; 
 
} 
 

 
.top-menu>ul>li:hover { 
 
    background-color: #d6e2ea; 
 
} 
 

 
ul.sub-menu { 
 
    position: absolute; 
 
    width: 290px; 
 
    background-color: #d6e2ea; 
 
    list-style: none; 
 
    padding-left: 0px; 
 
    padding-top: 5px; 
 
    opacity: 0; 
 
} 
 

 
ul.sub-menu li { 
 
    font-size: 80%; 
 
    padding-top: 10px; 
 
    padding-left: 25px; 
 
    padding-bottom: 10px; 
 
} 
 

 
.top-menu li:hover .sub-menu { 
 
    opacity: 1; 
 
    left: 0px; 
 
}

<nav class="top-menu"> 
 
    <ul> 
 
    <li> A 
 
     <ul class="sub-menu"> 
 
     <li>Sub a </li> 
 
     <li>Sub b </li> 
 
     <li>Sub c </li> 
 
     </ul> 
 
    </li> 
 
    <li> B </li> 
 
    <li> C </li> 
 
    </ul> 
 
</nav>

来源

2017-04-09 InTheBackground

这将是非常有用的，如果你发布一个plunker与你的代码。 –

改用opacity掩饰你sub-menu的。您可以使用display: none隐藏，然后display: block再次显示。

如果你只是改变不透明度，元素仍然是“在你的鼠标下”，CSS试图多次显示和隐藏（你的子菜单是“轻弹”）。

使用display: none子菜单消失，并且鼠标不会将其“永久”悬停。

我用正确的代码创建了一个plunker。 https://embed.plnkr.co/TZ7U0m19WijN0kIe6Xgl/

来源

2017-04-09 07:24:38

感谢您的解释！ – InTheBackground

请评价答案。不用谢。 –

新手CSS：下拉菜单显示没有菜单悬停？

回答

相关问题