CODEWITHSUNDEEP
htmlcssdrop-down-menu
Laura Harmon
Laura Harmon

Reputation: 321

Drop down menu disappears when mouse moves off menu bar?

I have a menu bar that has three items with drop down menus. When I hover my mouse over the menu bar itself, the drop down menu shows up, but when I move the mouse away to hover over something in the actual drop down menu, it disappears. I assume I'm missing something in my css code, but I'm not sure what. Here's what I have:

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

Upvotes: 3

Views: 4879

Answers (2)

Darron Donaldson
Darron Donaldson

Reputation: 291

This happened to me and tried several methods. I altered the following code and worked a charm! It was strange because it only happened on the index page!!

Was this...

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

Changed to...

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

Upvotes: 2

Alex Tape
Alex Tape

Reputation: 2291

you have to do something like this

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

now you are "the whole time" hover 'menubar' and the dropdown will not dissappear

Upvotes: 2

Related Questions