While designing a drop-down menu for my website, I encountered an issue. The menu appears when I hover over it, but as soon as I move the mouse pointer on top of it, the menu disappears. Adjusting the line height under "ul.menu li > a" helped to some extent, but didn't completely solve the problem. I also experimented with the "z-index" property without any success.
Below is the CSS code:
ul.menu {
display: inline;
padding: 0px;
margin: 0px;
z-index:999;
}
#black_lay {
display:none;
position: absolute;
left: 0%;
top: 0%;
background-color: black;
-moz-opacity: 0.7;
-webkit-opacity: 0.7;
opacity: .70;
filter: alpha(opacity=70);
width: 100%;
height: 100%;
z-index: 90;
}
#overlay {
display: none;
position: absolute;
left: 25%;
top: 25%;
padding: 25px;
border: 2px solid black;
background-color: #ffffff;
width: 50%;
height: 50%;
z-index: 100;
}
ul.menu li {
position:relative;
cursor: pointer;
-webkit-transition: padding .05s linear;
-moz-transition: padding .05s linear;
-ms-transition: padding .05s linear;
-o-transition: padding .05s linear;
transition: padding .05s linear;
}
ul.menu li.drop {
position: relative;
}
ul.menu > li {
display: inline-block;
}
ul.menu li > a {
line-height: 80px;
padding: 0 1px;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.dropOut .triangle {
width: 0;
height: 0;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain {
width: 160px;
position: absolute;
z-index: 9000000;
left: 50%;
margin-left: -80px;
top: -400px;
}
dropOut {
width: 160px;
background: white;
float: left;
position: relative;
margin-top: 0px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
box-shadow: 0 1px 6px rgba(0,0,0,.15);
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
dropOut ul > li {
list-style: none;
}
dropOut ul {
float: left;
padding: 10px 0;
}
dropOut ul li {
text-align: left;
float: left;
width: 125px;
padding: 12px 0 10px 15px;
margin: 0px 10px;
color: #777;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background .1s ease-out;
-moz-transition: background .1s ease-out;
-ms-transition: background .1s ease-out;
-o-transition: background .1s ease-out;
transition: background .1s ease-out;
}
dropOut ul li:hover {
background: #f6f6f6;
}
ul.menu li:hover a { color: white; }
ul.menu li:hover .dropdownContain { top: 45px; z-index: 500;}
ul.menu li:hover .underline { border-bottom-color: #777; }
ul.menu li:hover dropOut { opacity: 1; margin-top: 15px; }
Here's my HTML:
<nav style="display:inline">
<ul class="menu">
<li class="drop">
<a>Username</a>
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Account</li>
<li>Logout</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>