首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >悬停子菜单项时保持子菜单打开

悬停子菜单项时保持子菜单打开
EN

Stack Overflow用户
提问于 2015-06-19 13:50:55
回答 1查看 1.3K关注 0票数 0

我知道这是一个非常基本的css问题,但就是想不出来。

当我将鼠标悬停在顶层菜单项上时,会显示子菜单,但如果我试图将鼠标悬停在子菜单项上,子菜单就会消失。

请参阅下面的菜单结构和我的css以显示子菜单

代码语言:javascript
代码运行次数:0
运行
复制
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;
}
代码语言:javascript
代码运行次数:0
运行
复制
<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>

EN

回答 1

Stack Overflow用户

发布于 2015-06-19 15:06:27

很难绝对确定,因为我们没有完整的代码样本,但这通常只是一个快速修复。

代码语言:javascript
代码运行次数:0
运行
复制
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;
}
代码语言:javascript
代码运行次数:0
运行
复制
<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
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/30930799

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档