javascript - 子菜单 - 菜单栏中的淡入和淡出子菜单

Question

我想创建一个菜单栏，悬停在其中时，相关的额外菜单应该出现在元素旁边，当鼠标指针离开时，它应该消失。

例如，当您将鼠标指针放在此页面顶部的用户名上时，您会看到一个包含事件、权限、注销等的菜单。

我想实现这样一个菜单。

切换额外菜单元素(例如 div)的可见性(或更改显示)属性是显而易见的。

但我的问题是我怎么能检测到鼠标指针悬停在额外的菜单上，并且在鼠标指针消失之前它不应该消失!

我不想使用 JQuery。

Answer 1

纯CSS方法

fiddle : http://jsfiddle.net/gvee/jrFse/

HTML

<ul>
    <li>Item 1
        <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    </li>
    <li>Item2</li>
    <li>Item 3
        <ul>
            <li>Subitem 1</li>
        </ul>
    </li>
</ul>

CSS

ul
{
    list-style-type: none;
}

ul li
{
    padding: 5px;
    margin: 3px;
    border: 1px solid black;
}

ul li:hover
{
    background-color: lime;
}

li ul
{
    display: none;
}

li:hover ul
{
    display: block;
}

li ul li:hover
{
    background-color: red;
}

注意:还有一些样式需要你做，这只是为了说明原理。