如何让我的下拉菜单和悬停效果正确？答案

【问题标题】：How to get my dropdown menu and hover effect right?如何让我的下拉菜单和悬停效果正确？
【发布时间】：2012-07-01 20:42:10
【问题描述】：

我已经构建了一个具有下拉功能的水平菜单，它几乎可以正常工作。我只有 2 个问题，我找不到解决这些问题的正确方法：

主菜单链接和下拉菜单之间的距离有点远，所以当您尝试将鼠标移动到下拉菜单时它就会消失。我知道通过更改 @987654322 @ 变成一个较小的数字会使它更靠近链接，但这也意味着它将覆盖下面的主菜单灰线。下拉列表必须位于该线下方。
我尝试使用 CSS 悬停效果更改主菜单链接的背景颜色。但是发生的情况是背景颜色没有填充正确的宽度和高度。

这是我的实际代码：

http://jsfiddle.net/flasy_kid/bFBcg/

【问题讨论】：

标签： html css menu drop-down-menu

【解决方案1】：

您还应该将其更改为使用类而不是 ID，以便您的 CSS 更通用，但这解决了您列出的两个问题：http://jsfiddle.net/bFBcg/2/

【讨论】：

你对类和 ID 的权利，但这并没有真正起作用。问题仍然是，如果您的移动速度不够快，您就没有机会进入下拉菜单。并且下拉菜单位置显示在主菜单底线上方。如果你在浏览器中测试它，你可以看到我在说什么。
然后继续调整位置，直到它到达你想要的位置。

【解决方案2】：

这似乎工作正常，http://jsfiddle.net/bFBcg/6/

li.menu_item {
    display:inline-block; 
    list-style-type: none; 
    padding-right: 20px; 
    position:relative; 
}
#menu li a {
    text-decoration:none; 
    color:black;
}
#menu_main {
    border-color:#E2E2E2;
    border-style:solid; 
    border-width:1px 0 1px 0;
}
#submenu_dames { 
    margin:0; 
    padding:0; 
    position:absolute; 
    width:550px; 
    border-left:1px solid black; 
    border-right:1px solid black; 
    border-bottom:1px solid black; 
    background:#F6F6F6; display:none;
}
#submenu_heren { 
    margin:0; 
    padding:0; 
    position:absolute; 
    width:550px; 
    border-left:1px solid black; 
    border-right:1px solid black; 
    border-bottom:1px solid black; 
    background:#F6F6F6; 
    display:none;
}
.menu_item:hover #submenu_dames {
    display:block;
}
.menu_item:hover #submenu_heren {
    display:block;
}
.submenu { 
    margin:0; 
    padding:0; 
}
.submenu li { 
    margin:0; 
    padding:0; 
    list-style:none;
}
.submenu_vak {
    float:left; 
    width:150px; 
    margin: 5px; 
    padding: 5px;
}
.submenu_titel {
    font-weight:bold;
}
.menu_item:hover {
    background-color:#eee;
}

【讨论】：

就像上面的 swider 解决方案一样，它并没有真正起作用。我建议在网络浏览器中对其进行测试以了解我的意思。