CODEWITHSUNDEEP
javascriptcssdrop-down-menu
YorkieMagento
YorkieMagento

Reputation: 366

CSS Drop Down Menu - disappears too quickly on mouse out

I'm hoping one of you nice people can help. I have a pure CSS drop down menu, as part of the design it needs to be slightly away from the main menu item, the problem is that because of this design there's a gap - and so as soon as the mouse moves away from the sub menu it disappears. I want it to hold their for a while longer so the user has more chance to click. Can anyone help?

I've set up a JS fiddle here.

<div id="menu" class="top">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">portfolio</a>
<ul>
<li><a href="#">Overview</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
</li>
    </div>

#menu{
position:absolute;
left:0;
zoom:1;
background-color:#010;
}
#menu ul{
position:relative;
border-top: dotted 1px #fff;
border-bottom: dotted 1px #fff;
padding:2px 0 2px 0;
float:right;
zoom:1;
list-style:none;
}
#menu ul li{
margin:0;
font:16px/16px 'Open Sans', sans-serif;
padding:0 5px 0 0;
display:inline;
position:relative;
zoom:1;
}
#menu ul li a{
color:#fff;
text-decoration:none;
}
#menu ul li a:hover{
text-decoration:underline;
}
#menu ul li.selected a{
    color:#8dc63e;
}
#menu ul li ul {
  border: 2px solid #fff;
  border-radius:10px;
  background-color: #8dc63e;
  padding: 0;
  position: absolute;
  top: 45px;
  right: -30px;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.8s;
  -moz-transition: opacity 0.8s;
  -ms-transition: opacity 0.8s;
  -o-transition: opacity 0.8s;
  -transition: opacity 0.8s;
}
#menu ul li ul li {   
  display: block;
  border-bottom: 1px solid #fff; 
  color: #fff;
  padding:10px;
}
#menu ul li ul li:hover { text-decoration:underline; }
#menu ul li.selected ul li a { color: #fff;}

#menu ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
  z-index:250;
}
#menu ul li ul:after{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #fff transparent;
display: block;
width: 0;
z-index: 1;
top: -15px;
left: 64px; 
}

Upvotes: 0

Views: 6046

Answers (1)

Adam Marshall
Adam Marshall

Reputation: 3009

It seemed a bit of a mess, lots of duplication with display:none being set as well as opacity:0 and visibility:hidden. There are a few z-indexes in there as well. Not nice to maintain.

Really what you need is for the UL menu to be opacity 0, with a transition to fade it in over time, but not too quick, and then the hover state to be opacity 1.

So from fiddling with your fiddle...

#menu ul li ul {
  border: 2px solid #fff;
  border-radius:10px;
  background-color: #8dc63e;
  padding: 0;
  position: absolute;
  top: 45px;
  right: -30px;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  opacity: 0;
  -webkit-transiton: opacity 8s;
  -moz-transition: opacity 8s;
  -ms-transition: opacity 8s;
  -o-transition: opacity 8s;
  -transition: opacity 8s;
}

and

#menu ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
  z-index:250;
}

This one works, http://jsfiddle.net/ydF3B/1/ although I set the transition to be 8s from 0.8s... you might want to dig through and remove all the unneccessary styles and see what is actually going on.

Have fun :)

EDIT Complete justification for my earlier comment about wanting to dig through it all, the fiddle above doesn't solve your issue as pointed out in the comments :) Instead a better approach is to make the area you are hovering over larger, so that when you pass over from the menu item onto the menu, there is no actual gap, even though there is a visual gap. I did this by increasing the padding: http://jsfiddle.net/ydF3B/2/

Upvotes: 3

Related Questions