CSS 下拉菜单的问题答案

【问题标题】：Issues with a CSS Dropdown MenuCSS 下拉菜单的问题
【发布时间】：2012-05-07 05:40:03
【问题描述】：

我已经使用 CSS 构建了一个下拉菜单。所有的定位都是正确的，看起来很棒。但无法单击子菜单选项。当光标位于通向下拉菜单的按钮上方时会出现子菜单，但是一旦向下移动光标，尝试单击链接，菜单就会消失。我已经尝试更改 z-index 和定位，但它似乎不起作用。

(有两个下拉子菜单，一个接一个，但是网站不让我贴html代码。#navigation指的是整个导航栏，menu是包裹两个子菜单的div，sub_menu是每个个别子菜单） css代码为：

#navigation { width: 100%; background: #1C140D; /*BUTTONS*/ }
#navigation ul { margin: 0; padding: 0; width: 100%; }
#navigation ul li { list-style-type: none; display: inline; color:#1C140D; }
#navigation li a { display: block; float: left; padding: 5px 10px; color: #FFFFFF; text-decoration: none; border-right: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; }
#navigation li a:hover { background: #000000; color: #FFFFFF; }
#content-container { float: left; width: 100%; height: 175px; background: #FFFFFF url(/wp-content/uploads/layout-three-fixed-background.gif) repeat-y 100% 0; color: #F2E9E1; }
ul { font-family: Arial, Verdana; font-size: 14px; margin:0; padding:0; list-style:none; }
ul li { display: block; position: relative; float: left; color: #1C140D; }
li ul {display:none; }
ul li a { display: block; text-decoration: none; color: #1C140D; border-top: 1px solid #FFFFFF; padding: 15px 15px 15px 15px; background: #1C140D; /*BUTTONS*/ margin-left: 1px; white-space: nowrap; }
ul li a:hover { background:#1C140D; }
li:hover ul { display: block; }
ul.sub_menu { position:absolute; border-bottom: 1px solid #FFFFFF; color: #1C140D; top: 30px; }
li:hover li { float: none; font-size: 14px; color: #1C140D; }
li:hover a { background: #1C140D; color: #FFFFFF; }
li:hover li a:hover { background: #1C140D; color: #FFFFFF; }

【问题讨论】：

标签： html css

【解决方案1】：

尝试放大引导按钮并将其添加到子菜单列表中。或者尝试将子菜单移动到铅按钮下几个像素，然后将鼠标悬停{显示}到它。

【讨论】：

【解决方案2】：

ul.sub_menu {
    position:absolute;
    border-bottom: 1px solid #FFFFFF;
    color: #1C140D;
    top: 30px;
}

您的问题在于这一行，您将子菜单下拉菜单推离父菜单项太远，因此要修复它只需将 top:30px 更改为 top:100% 以将您的子菜单与菜单项完全 100% 定位并应该修好了。

ul.sub_menu {
    position:absolute;
    border-bottom: 1px solid #FFFFFF;
    color: #1C140D;
    top: 100%;
}

【讨论】：