社区首页 >问答首页 >悬停子菜单项时保持子菜单打开

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

Stack Overflow用户

提问于 2015-06-19 05:50:55

回答 1查看 1.3K关注 0票数 0

我知道这是一个非常基本的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>

EN

回答 1

Stack Overflow用户

发布于 2015-06-19 07: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>

票数 -1

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30930799

复制

相关文章

Android-SubMenu选项菜单和子菜单

menuitem submenu 布局

简介： SubMenu：代表一个子菜单，包含1~N个MenuItem 实现效果：具体实现方法：主活动 MainActivity： public class MainActivity extends AppCompatActivity { //定义 “字体大小” 菜单项的标识 final int FONT_10 = 0x111; final int FONT_12 = 0x112; final int FONT_14 = 0x113; final int FON

圆号本昊

2021/09/24

1.3K0

Android-SubMenu选项菜单和子菜单

13、Java菜单条、菜单、菜单项

13、Java菜单条、菜单、菜单项一般用Java做界面时，都得牵涉到菜单条、菜单、菜单项的设计。菜单项放在菜单里，菜单放在菜单条里，且其字体均可设置。 13.1、菜单条（Menubar） Fram

YGingko

2017/12/28

3.2K0

C#嵌入子窗体，判断子窗体是否打开了

/// <summary> /// 嵌入子窗体，判断子窗体是否打开了 /// </summary> public static Form1 f; public void Form1Show() { if (f == null || f.IsDisposed) { f = new Form1 {

landv

2019/03/19

2K0

初学java之菜单条，菜单，菜单项的设置

1 package project; 2 import javax.swing.*; 3 4 import java.awt.event.KeyEvent; 5 import java.awt.event.InputEvent; 6 import static javax.swing.JFrame.*; 7 class WindowMenu extends JFrame //JFrame的子类 8 { 9 JMenuBar myBar ; 10 JMenu menu , su

Gxjun

2018/03/22

2.1K0

bootstrap 下拉菜单禁用菜单项

button class dropdown href toggle

　<div class="dropdown"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉菜单<span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">菜单项1</a></li> <li class="disabled"><a href="#">菜单项2</a></li> <li><a href="#">菜单项3</a></li> </ul> </div>

用户5760343

2019/07/05

2.3K0

安卓开发_浅谈SubMenu（子菜单）

子菜单，即点击菜单后出现一个菜单栏供选择创建子菜单的步骤：　　（1）覆盖Activity的onCreateOptionsMenu()方法，调用Menu的addSubMenu()方法来添加子菜单　　（2）调用SubMenu的add()方法，添加子菜单项　　（3）覆盖onContextItemSelected()方法，响应子菜单的单击事件示例：（1）覆盖Activity的onCreateOptionsMenu()方法，调用Menu的addSubMenu()方法来添加子菜单 1

听着music睡

2018/05/18

9330

python开发_tkinter_多级子菜单

==========================================================

Hongten

2018/09/13

1.9K0

python开发_tkinter_多级子菜单

【jQuery进阶】子菜单插件Slight Submenu

css jquery javascript

兼容所有浏览器（记住，jQuery的2 *及以上不支持<IE9，如果您使用的是，对于那些旧的浏览器不支持）

用户5640963

2019/07/26

1.6K0

jQuery二级菜单的显示隐藏

在jQuery中创建二级菜单的显示和隐藏可以通过使用事件处理函数和CSS样式来实现。

堕落飞鸟

2023/05/18

3.3K0

【说站】python PyQt子菜单的使用

以上就是python PyQt子菜单的使用，希望对大家有所帮助。更多Python学习指路：python基础教程

很酷的站长

2022/11/24

8420

使用子查询时应当注意的

在一个查询中： UPDATE a SET a.scts = b.v1, a.YCYL = b.v2, a.YCSL = b.v3 FROM kfdbsyy a, (SELECT f_wellnumber, COUNT(*) AS v1, SUM(f_fule) AS v2, SUM(f_totalliquid - f_fule) AS v3 FROM (SELECT * FROM CY_WELLRECOR

用户1075292

2018/01/23

2K0

界面组件之导航菜单备案

<li><a href="#" rel="prev">prev</a></li>

小蔚

2019/09/11

1.9K0

皮肤引擎(HTMLayout)特性说明文档

布局对象函数脚本事件

此界面引擎基于 HTMLayout 开发, 关于 HTMLayout 的更多信息请访问以下网站:

用户2135432

2023/10/18

3340

【原型设计】如何利用Axure实现下拉子菜单？

axure final web 原型

Axure RP是一款专业的快速原型设计工具，让我们能够快速设计并创建出应用软件或Web页面的具备高保真和交互能力的原型。通过原型设计，不但能更好地与客户进行交流确认，也能明确地给开发人员以成品效果作为开发指导。本文介绍如何透过这款工具实现下拉子菜单功能的原型设计。

嘉为蓝鲸

2020/05/13

5.2K0

【原型设计】如何利用Axure实现下拉子菜单？

WiX安装选项---开始菜单项

参考文档: How To: Create a Shortcut on the Start Menu，How To: Create an Uninstall Shortcut 制作的安装程序安装后，都要

张善友

2018/01/19

1.2K0

python multiprocess 子进程和主进程同时抛出异常时子进程无法退出

python callback 函数进程异常

在使用python的multiprocess库时，如果在主进程中的处理子进程的返回函数callback或者处理子进程的错误的函数errorbackerror中抛出异常，则子进程无法退出。（1）errorcallback中抛出异常

锦小年

2021/12/08

3.1K0

python multiprocess 子进程和主进程同时抛出异常时子进程无法退出

AngularDart Material Design 菜单顶

材质菜单基于MenuModel对象呈现菜单。此菜单包含material-popup中的material-list和material-button，其文本或图标可由调用者指定。

南郭先生

2018/09/30

2K0

当elementui的el-dialog组件中包含子组件时，用refs调用子组件时的undefined问题

jquery ui 网站

今天用elementui写了一个el-dialog组件里面包着一个el-transfer穿梭框组件，代码

李维亮

2021/07/08

1.5K0

CSS 3.0实现的悬停菜单特效

今天给大家分享一个用CSS 3.0实现的悬停菜单特效，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head> <

越陌度阡

2020/11/26

1.2K0

CSS 3.0实现的悬停菜单特效

点击加载更多

相似问题

jQuery:在子菜单上悬停时保持子菜单打开

13

悬停后保持子菜单打开

10

在悬停jquery时保持子菜单打开

20

如何在悬停到父菜单项时打开子菜单

30

当子菜单悬停时父菜单项悬停

15

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例