javascript - html/javascript 悬停菜单

Question

我的页面顶部已经有一个导航菜单，但现在当我将鼠标悬停在这些选项之一上时，我尝试展开子菜单。我的第一个想法是简单地在代码中添加一个“div”部分，如下所示

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

并根据导航选项是否悬停在其上显示/隐藏它，但后来我意识到，一旦我将鼠标从相应的导航菜单按钮上移开，子菜单就会消失。有谁知道如何将鼠标悬停在选项上，调出菜单，然后能够访问子菜单而不使其消失？

Answer 1

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

<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; }