Hover Dropdown Delay

Hi, first post on Sitepoint.

There is a menu in which I want the hover-dropdown to fade out after some seconds. After looking at many examples online I found this simplest of examples on jsfiddle. But simple as it is it’s not working when I try to adapt it to the menu I’m working on which can be seen here. In the first paragraph of that page I also describe what I’m attempting.

Thank You

DanV

Hi,

You don’t seem to have added the mechanism for the delay which was the transition property for opacity.

You can’t then hide the menu offscreen because the opacity effect will happen while the menu shoots back off screen and won’t be seen.

You could just hide it with opacity and a negative z-index and the you will see the effect. However you won;t be able to have more than one submenu because the other menu will be delayed by 3 seconds so you will get menus being stacked on top of each other while you traverse the menu.

If you ony have one sub menu then your ul rule needs to look like this.

#nav li ul {
	position:absolute;
	left:0;
	right:0;
	margin:auto;
	display:block;
	width:400px;
	height:auto;
	padding;:5px;
	opacity:0;
	background:#F2F2F2;
	transition: all 0.5s ease 3s;
	z-index:-1;
	font-family:'Times New Roman', serif;
}
#nav li:hover ul {
	opacity:1;
	transition: all 0.5s ease 0s;
	z-index:2;
}

Note that you had about three rules all targeting those elements (some with ids and some without so you had a mixture of styles cascading into the element).

Then in your media query for smaller screens set opacity to 1 and set transition to none.

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