Home > Article > Web Front-end > I have a problem with my navigation bar dropdown_html/css_WEB-ITnose
I have a problem with my navigation bar dropdown_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:20:101580browse
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> For reference.
XML/HTML code?12345678910111213141516171819202122232425262728293031323382347e017cd39ae44495060246df6e7a
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>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