I have a problem with my navigation bar dropdown_html/css

I have a problem with my navigation bar dropdown_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:20:10

Original

1586 people have browsed it

As soon as I move the mouse away from the navigation bar, the drop-down menu disappears and the mouse cannot be moved over the menu at all. What should I do? ? ? Please God, it is best to use a simpler method

Reply to the discussion (solution)

Add a timer to the "Hide the drop-down menu" area and specify the amount of time before hiding it.
Then when the mouse moves to the drop-down menu, clear the timer.
The above is the idea, just write the specific code yourself, it is quite simple.

As soon as I move the mouse away from the navigation bar, the drop-down menu disappears and the mouse cannot be moved to the menu at all. What should I do? ? ? Please God, it is best to use a simpler method
I don’t know what happened to the one I wrote. When the mouse is moved to the menu ul, it shows that it is an onmouseout event? ? What's going on? ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />	<title>延迟提示框</title>	<style type="text/css">	#div1{width:200px;height:30px;background:red;}	#div2{width:150px;height:20px;background:gray;display:none;margin:10px;}	</style></head><body>	<div id="div1"></div>	<div id="div2"></div></body></html><script type="text/javascript">window.onload = function(){	var oDiv1 = document.getElementById('div1');	var oDiv2 = document.getElementById('div2');	var timer = null;		oDiv1.onmouseover = oDiv2.onmouseover = function(){		oDiv2.style.display = 'block';		clearTimeout(timer);	};		oDiv1.onmouseout = oDiv2.onmouseout = function(){		timer = setTimeout(function(){			oDiv2.style.display = 'none';		}, 500);	};}</script>

Copy after login

For reference.

XML/HTML code?123456789101112131415161718192021222324252627282930313233

then it is possible that there is an onmouseover event on the menu.

Is there any specific code?

The drop-down menu must be wrapped in the main menu

The mouse has moved to a blank space.

<ul>  <li><a>MENU</a>    <ul>      <li><a>LIST</a></li>    </ul>  </li></ul>

Copy after login

The reason why it disappears before it can be moved is because there is a blank space between the hyperlink text and the sub-navigation. When moving, it passes through the blank area first. If you are familiar with using the inspect element function of the Chrome browser, you can check it out. The solution is to set a padding value for the text of the main navigation hyperlink. For example, set #nav a {padding:10px 20px;}, and the margin value is 0

Put the drop-down menu into the corresponding navigation bar label. Next

There should be no problem if you use JQUERY's hide

Just write an onmouseover event for the drop-down menu page

Thank you for your enthusiastic answers. My problem has been solved