3

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

2 回答 2

2

你必须做这样的事情

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

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

于 2013-10-19T19:32:03.210 回答
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;
}
于 2013-11-14T19:13:01.980 回答