我知道这是一个非常基本的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>
发布于 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>
https://stackoverflow.com/questions/30930799
复制相似问题