鼠标移出菜单栏时下拉菜单消失？答案

【问题标题】：Drop down menu disappears when mouse moves off menu bar?鼠标移出菜单栏时下拉菜单消失？
【发布时间】：2013-10-19 18:56:03
【问题描述】：

我有一个菜单栏，其中包含三个带有下拉菜单的项目。当我将鼠标悬停在菜单栏本身上时，会显示下拉菜单，但是当我将鼠标移开以将鼠标悬停在实际下拉菜单中的某些内容上时，它就会消失。我假设我在我的 css 代码中遗漏了一些东西，但我不确定是什么。这是我所拥有的：

body {
background: url(background.jpg);
font-family:Georgia;
margin:10;
padding:10;
}

.main {
width:1000px;
margin:0 auto;
background: #000;
color:#fff;
}


.main > div {
height:200px;
margin:10px;
}

div.bottom {
height:0;
clear:both;
margin:0;
}

.main .head {
height:100px;
color:#fff;
line-height: 100px;
}

h1 {
font-size: 30px;
font-weight: bold;
margin:0;
}

h5 {
color:#000;
}



.main .page {
min-height:500px;
height:auto;
 }

.main .foot {
height:70px;
text-align: center;
line-height: 70px;
}

.span_1 {
width:800px;
}

.span_2 {
width:990px;
}

div.menu {
height:50px;
line-height: 50px;
background:#000;
color:#fff;
}

.menu a:link,
.menu a:visited {
color:#000;
text-decoration: none;
padding:0 10px;
}

.menu ul,
.menu li,
.menu h5,
.menu .mega-drop {
list-style:none;
margin: 0;
padding: 10;
background:#fff;
}

.menu li {
position: relative;
}


.menu > ul > li {
float:left;
border-right:solid 1px;
}


.menu > ul > li > ul {
position: absolute;
left:0;
top:60px;
width:400px;
z-index:1;
display:none;
}


.menu > ul > li > .mega-drop {
position: absolute;
left:0;
top:60px;
z-index:1;
width:400px;
display:none;
}

.menu > ul > li > .mega-drop > .mega-drop-column {
float:left;
width:200px;
}

.menu > ul > li > ul > li > ul {
position: absolute;
left:400px;
top:0;
width:400px;
z-index:1;
display:none;
}

.menu li:hover {
background: #3f0;
}

.menu li:hover > ul,
.menu li:hover > .mega-drop {
display: block;
}

【问题讨论】：

JSFiddle 会有所帮助。

标签： html css drop-down-menu

【解决方案1】：

你必须这样做

<div id="menubar"> <- here is your hover to show the menu
    <div id="navpoint1">...</div>
    <div id="navpoint2">...</div>
    <div id="navpoint3">...</div>
    ...
</div>

现在你“一直”悬停在“菜单栏”上，下拉菜单不会消失

【讨论】：

【解决方案2】：

这发生在我身上并尝试了几种方法。我更改了以下代码并发挥了作用！这很奇怪，因为它只发生在索引页上！！

这是……

#nav li ul {
width:100%;
margin:0;
padding:0;
display: none;
position: absolute;
top: 100%;
background-color: #39F;
background: rgba(51, 153, 255, .9);
}

改为...

#nav li ul {
width:100%;
margin:0;
padding-top:.2em;
display: none;
position: absolute;
top: 100%;
background-color: #39F;
background: rgba(51, 153, 255, .9);
z-index:99999;
}

【讨论】：