html - 鼠标移出菜单栏时下拉菜单消失？

Question

我有一个菜单栏，其中包含三个带有下拉菜单的元素。当我将鼠标悬停在菜单栏本身上时，会显示下拉菜单，但是当我将鼠标移开并悬停在实际下拉菜单中的某个内容上时，它会消失。我假设我的 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;
}

Answer 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>

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