html/javascript悬停菜单

html/javascript hover menu

本文关键字：菜单 悬停 javascript html      更新时间：2023-09-26

我已经在页面顶部有了一个导航菜单，但现在我正试图在悬停在其中一个选项上时展开一个子菜单。我的第一个想法是简单地在代码中有一个类似的"div"部分

<div id= "expanded_menu"> <!-- sub menu option --> </div>

并根据导航选项是否悬停来显示/隐藏它，但后来我意识到，只要我把鼠标从它对应的导航菜单按钮上移开，子菜单就会消失。有人知道如何将鼠标悬停在一个选项上，打开一个菜单，然后能够在不消失的情况下访问子菜单吗？

通常的方法是使用嵌套列表。。。

<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。

.sub-menu { display: none; }
#main-menu li:hover .submenu { display: block; }

只要子菜单嵌套在父菜单项的div中，您的方法就可以工作。所以你的HTML结构应该是：

<div class="main_menu_item">MainItem
    <div class="sub_menu_item">Item1</div>
    <div class="sub_menu_item">Item2</div>
</div>

然后，当您将鼠标悬停在子项目上时，您仍然将鼠标悬停于主项目上。

然而，我个人会在CSS中实现这一切——搜索"CSS菜单"，你会发现大量的资源。

相关文章：