新手CSS:下拉菜单显示没有菜单悬停?
我在这里新来的,在HTML和CSS新。新手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>
改用opacity
掩饰你sub-menu
的。您可以使用display: none
隐藏,然后display: block
再次显示。
如果你只是改变不透明度,元素仍然是“在你的鼠标下”,CSS试图多次显示和隐藏(你的子菜单是“轻弹”)。
使用display: none
子菜单消失,并且鼠标不会将其“永久”悬停。
我用正确的代码创建了一个plunker。 https://embed.plnkr.co/TZ7U0m19WijN0kIe6Xgl/
感谢您的解释! – InTheBackground
请评价答案。不用谢。 –
这将是非常有用的,如果你发布一个plunker与你的代码。 –