2

我创建了一个包含子菜单的 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>

4

3 回答 3

1

问题是主要和孩子之间的脱节<ul>。

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

创建断开连接（因此当您将鼠标悬停在至时，您将鼠标top:150%;悬停在任何内容上而不是点击子菜单的 :hover逻辑）。您可以尝试改用：ul liul li ulpadding-top

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

编辑：这是您可以查看的工作导航菜单示例。

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

于 2013-03-04T17:34:50.260 回答
0

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

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

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

于 2013-03-04T17:48:02.263 回答
0

我用葡萄牙语写了一篇关于下拉菜单的文章，但我想它会帮助你使用谷歌翻译或类似的东西。

看看：http ://www.linhadecodigo.com.br/artigo/3474/menu-em-css-menu-dropdown-horizo​​ntal-com-html5-e-css3.aspx

于 2013-03-04T18:07:40.857 回答