Question

我创建了一个包含子菜单的HTML菜单，但是当我将鼠标悬停在主菜单上并显示子菜单时，我无法访问它。它在我可以向下移动鼠标以导航到它之前就消失了。我不知道我做错了什么，也许我的代码有人可以提供帮助。感谢

#header ul { position: absolute; top: 88px; left: 0; }
#header ul li { display: inline;}
#header ul li a { font-size: 11px; text-decoration: none; text-transform: uppercase; margin-right: 20px; color: #fff; line-height: 2em;}
#header ul li ul{ position: static;display: none; z-index: 999;top:150%;}
#header ul li:hover a { font-weight:bold; color: #000000}
#header ul li:hover ul { display: block; position:absolute;}

编辑以显示HTML

     <ul>
                <li><a href="/Default.aspx">Home</a>              
                </li>
                <li>
                    <a href="/Cover/HRMS.aspx">HRMS</a>
                    <ul>
                    <li>
                    <a href="/Cover/HRMS.aspx">Position</a>
                    </li>
                    <li>
                    <a href="/Cover/HRMS.aspx">COA</a>
                    </li>
                    <li>
                    <a href="/Cover/HRMS.aspx">Employee</a>
                    </li>
                    <li>
                    <a href="/Cover/HRMS.aspx">Estate</a>
                    </li>
                    </ul>
                </li>
                <li>
                    <a href="/Cover/EmployeeMaintenance.aspx">Employee Maintenance</a>
                </li>
                <li>
                <a href="/Cover/Payroll.aspx">Payroll</a>
                </li>
                <li>
                <a href="/Cover/DataTransfer.aspx">Data Transfer</a>
                </li>
                <li>
                <a href="/Cover/Reports.aspx">Reports</a>
                </li>
                <li>
                <a href="/Cover/Administration.aspx">Administration</a>
                </li>
                <li>
                <a href="/Cover/Help.aspx">Help</a>
                </li>
              </ul>

Answer 1

问题是主要人与子女<ul>之间脱节。

以你的风格ul li ul { position: static;display: none; z-index: 999;top:150%;}

top:150%;会创建断开连接（因此当您从:hover悬停到ul li时，您可以将鼠标悬停在任何位置而不是点击子菜单的ul li ul逻辑。您可以尝试使用padding-top代替：

ul li ul{ position: static;display: none; z-index: 999; padding-top:10px;}

编辑：Here是您可以查看的有效导航菜单示例。

编辑2：看起来它适用于Firefox和Chrome，但不适用于IE。

Answer 2

您需要一个直接的子选择器，位于以下位置：

li:hover > ul { display: block; (...) }

这意味着当直接父<ul>被悬停时，列表中的孩子<li>将会显示。

Answer 3

我用葡萄牙语撰写了一篇关于Dropdown菜单的文章，但我想它会帮助你进行谷歌翻译或类似的事情。

检查出来：http://www.linhadecodigo.com.br/artigo/3474/menu-em-css-menu-dropdown-horizontal-com-html5-e-css3.aspx

尝试将鼠标悬停在其上时，HTML子菜单会消失

3 个答案: