Delaying Hover Effect for Menu

Site: http://liquidwinter.com/resources/style

I would like to lower the menu that appears when you hover over the top navigation by about 15px. If I do however, then I can’t actually get to the sub-menu because the mouse leaves the <li> that contains the hover effect to make it visible, so the menu disappears.

You can see the effect I want by adding this:

#lw-topnav ul li ul {
	margin-top:15px !important;
}

I think this can be achieved by using a transition-delay, but no matter where I put it, it doesn’t seem to have any effect. I’d like to avoid using javascript if I have to. Can anyone help on where to add the transition-delay?

Thanks

Instead of margin, you could try padding or border, as this will still be part of the target element and therefore will not lose the hover as the cursor crosses it.

I usually do as Sam suggests and pad the top of the ul to make some distance but ot means styling the list with the the original styling instead of the ul.

A quick hack to avoid changing anything is to do this:

.menu> ul{top:100px}
li.parent:hover:after{
content:"";
position:absolute;
left:0;
right:0;
top:0px;
height:100px;
}
1 Like

This did it:

	#lw-topnav ul>li:hover:after{
		content:"";
		position:absolute;
		left:0;
		right:0;
		top:0px;
		height:120%;
	}

Thanks for the idea! I would still like to know how to do it with the transition delay, but I have no idea how to even troubleshoot that since it’s an object under a different object which checks the hover.

You can’t do it with display:none/block or visibility:hidden because those are instant and not available for transitions. You can do it with opacity or position or both (e.g. move the menu off screen to hide it which is the way it should be done anyway).

The transition-delay is applied to the non hovered state and that clicks into action when you stop hovering. Here is the simplest example of that.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul{margin:0;padding:0;list-style:none;}
ul ul {
	position:absolute;
	top:400px;
	left:-999em;
	transition:all .5s ease;
	transition-delay:2s;
	opacity:0;
	background:red;
	height:100px;
	width:200px;
}
li {
	position:relative;
}
li:hover ul {
	left:0;
	transition:all .2s ease;
	opacity:1;
}
</style>
</head>

<body>
<ul>
  <li><span>Test</span>
    <ul>
      <li>test sub</li>
    </ul>
  </li>
</ul>
</body>
</html>

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.