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

你没有悬停隐藏的菜单项;你正在徘徊它的李氏父母。您还有ul和.hiddenMenu之间的空格，这是不正确的，因为.hiddenMenu是您的ul的类名。将其更改为：

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

JSFiddle Example

我最终删除了ul之前的.hiddenMenu，因为它是不必要的特异性，这会（略微）减慢浏览器对CSS的解释。

Answer 2

ul li:hover ul.hiddenMenu{
 display: block;
}

ul on hover显示项目不起作用

2 个答案: