html - ul 悬停显示元素不起作用

Question

我正在尝试实现一个菜单，在初始状态下菜单将被隐藏，当用户将鼠标悬停在它上面时应该显示隐藏的菜单。

代码

<div class="leftPanel">
<div id='cssmenu'>
    <ul>
        <li><a>User</a>

            <ul class='hiddenMenu'>
                <li><a>Add User</a>
                </li>
                <li><a>Update User</a>
                </li>
                <li><a>Delete User</a>
                </li>
                <li><a>Ban User</a>
                </li>
            </ul>
        </li>
        <li><a>View Service Request</a>
        </li>
        <li><a>About us</a>
        </li>
        <li><a>Log out</a>
        </li>
    </ul>
</div>

CSS

ul .hiddenMenu {
 display: none;
}

ul .hiddenMenu:hover{
 display: block;
}

Fiddle

悬停时不显示菜单。帮助将不胜感激。

Answer 1

您没有将鼠标悬停在隐藏的菜单项上；你在徘徊它的 li parent 。 ul 和 .hiddenMenu 之间还有一个空格，这是不正确的，因为 .hiddenMenu 是您的 ul 的类名。将其更改为:

#cssmenu li:hover .hiddenMenu {
    display: block;
}

JSFiddle Example

我最终删除了 .hiddenMenu 之前的 ul，因为它是不需要的特殊性，这(稍微)减慢了浏览器对 CSS 的解释。