悬停子菜单项时保持子菜单打开
悬停子菜单项时保持子菜单打开
提问于 2015-06-19 13:50:55
我知道这是一个非常基本的css问题，但就是想不出来。
当我将鼠标悬停在顶层菜单项上时，会显示子菜单，但如果我试图将鼠标悬停在子菜单项上，子菜单就会消失。
请参阅下面的菜单结构和我的css以显示子菜单
ul.sub-menu {
position: absolute;
left: -9999px;
margin: 0;
opacity: 0;
padding: 0;
background: #2A2A2A;
}
.menu-item:hover > ul.sub-menu {
left: auto;
opacity: 1;
}<li id="menu-item-109" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-109"><a href="/about">About</a>
<ul class="sub-menu">
<li id="menu-item-402" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-402"><a href="/news">News</a></li>
</ul>
</li>
回答 1
Stack Overflow用户
发布于 2015-06-19 15:06:27
很难绝对确定，因为我们没有完整的代码样本，但这通常只是一个快速修复。
li {
border: 1px solid red; /* for visual reference */
display:inline-block; /* shrink wrap */
position:relative; /* positioning context */
}
ul.sub-menu {
position: absolute;
left: -9999px;
top:100%; /* directly below the list item parent */
margin: 0;
opacity: 0;
padding: 0;
background: #2A2A2A;
}
.menu-item:hover > ul.sub-menu {
left: auto;
opacity: 1;
}<li id="menu-item-109" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-109"><a href="/about">About</a>
<ul class="sub-menu">
<li id="menu-item-402" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-402"><a href="/news">News</a>
</li>
</ul>
</li>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30930799
复制相关文章
相似问题
腾讯云开发者
