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>

现在你是“整个时间”悬停'菜单栏'并且下拉列表不会消失

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

当鼠标移出菜单栏时，下拉菜单消失了吗？

2 个答案: