html/javascript悬停菜单
我已经在我的页面顶部有一个导航菜单,但现在当我将鼠标悬停在其中一个选项上时,我正在尝试展开一个子菜单。我的第一个想法是简单地在代码中有一个类似这样的“div”部分html/javascript悬停菜单,javascript,html,menu,Javascript,Html,Menu,我已经在我的页面顶部有一个导航菜单,但现在当我将鼠标悬停在其中一个选项上时,我正在尝试展开一个子菜单。我的第一个想法是简单地在代码中有一个类似这样的“div”部分 <div id= "expanded_menu"> <!-- sub menu option --> </div> 并根据导航选项是否悬停显示/隐藏,但随后我意识到,当我将鼠标从相应的导航菜单按钮上取下时,子菜单就会消失。是否有人知道如何将鼠标悬停在某个选项上,让该选项打开菜单,然后能够访问子
<div id= "expanded_menu"> <!-- sub menu option --> </div>
并根据导航选项是否悬停显示/隐藏,但随后我意识到,当我将鼠标从相应的导航菜单按钮上取下时,子菜单就会消失。是否有人知道如何将鼠标悬停在某个选项上,让该选项打开菜单,然后能够访问子菜单而不使其消失?只要子菜单嵌套在父菜单项的div中,您的方法就会起作用。因此,您的HTML结构将是:
<div class="main_menu_item">MainItem
<div class="sub_menu_item">Item1</div>
<div class="sub_menu_item">Item2</div>
</div>
main项目
项目1
项目2
当您在子项上悬停时,您仍然在主项上悬停
然而,我个人会在CSS中实现这一切——搜索“CSS菜单”,你会发现大量的资源。通常的方法是使用嵌套列表
<ul id="main-menu">
<li>
First menu item
<ul class="sub-menu">
<li>Sub menu item</li>
...
</ul>
</li>
<li>Second menu item</li>
...
</ul>
使用已经开发和实现的脚本和/或样式,例如,您只需要CSS就可以实现这一点,这里不需要javascript。尝试本教程,以下是工作示例:
.sub-menu { display: none; }
#main-menu li:hover .submenu { display: block; }