CSS下拉菜单：悬停不做任何事情

Posted 2023-05-08

【中文标题】CSS下拉菜单：悬停不做任何事情

【英文标题】：CSS dropdown-menu: Hover does not do anything

【发布时间】：2012-03-31 20:43:46

【问题描述】：

Short ans sweet：为什么:hover不显示隐藏内容？从display: block: 到#trigger a:hover，我什么都试过了。

这里是测试用例：http://jsfiddle.net/5egvV/

【参考方案1】：

两个问题：

1。错误的 CSS 选择器

你有：

#trigger:hover ul ul 

应该是：

#trigger:hover ul 

2。错误的 html

你有：

<li id="trigger"><a href="#" title="#">Mainitem 1</a></li>
    <ul>
        <li><a href="#">Subitem 1</a></li>
        <li><a href="#">Subitem 2</a></li>
        <li><a href="#">Subitem 3</a></li>
    </ul>

应该是：

<li id="trigger"><a href="#" title="#">Mainitem 1</a>
    <ul>
        <li><a href="#">Subitem 1</a></li>
        <li><a href="#">Subitem 2</a></li>
        <li><a href="#">Subitem 3</a></li>
    </ul>
</li>

<ul> 应该进入<li>