Drop down div doesn't stay visible

Question

I am trying to make a drop down list and I have made it somewhat work. When I put the mouse over the area, a div in the shape of the drop down becomes visible. Then when you put your mouse over anything in the div, it disappears. That is obviously not meant to happen. Here is my code. Any solution is greatly appreciated.

HTML: <li><a onMouseOver="showServersDropDown()" onClick="showServersDropDown()" class="three-d"> Servers Servers Servers </a></li>

    <div onMouseOut="hideServersDropDown()" id="serversDropDown">
        <p>Live Map</p>
       </div> <!--This ends the Server List Drop Down Div-->

JS:

function showServersDropDown() {
    document.getElementById("serversDropDown").style.display="block";
}

function hideServersDropDown() {
    document.getElementById("serversDropDown").style.display="none";
}

Also you only want to visible the menu or portion when you hover the mouse on it? — java seeker, Feb 04 '14 at 03:20
there is actually a missing portion of code because of stack overflow's html engine it is below hopefully:

helion3 · Answer 1 · 2014-02-04T03:23:32.270

0

It's usually because the mouse is leaving the original div, the key is to make the submenu a child of the main div:

<ul class="menu">
  <li>
    <a>nav title</a>
    <ul>
      <li><a>sub link</a></li>
    </ul>  
  </li>
</ul>

Then in pure css you can handle this:

.menu ul { display: none }
.menu li:hover ul { display: block }

edited Feb 04 '14 at 03:23

answered Feb 04 '14 at 03:13

helion3

34,737
15
57
100

Well, the only thing inside the drop down div would be links. What would I do with that? – Emanuel Elliott Feb 04 '14 at 03:21
Updated my answer for a traditional nav list – helion3 Feb 04 '14 at 03:23
I have to go to bed so if you post and are expecting a response this is why. Have a good evening/day! – Emanuel Elliott Feb 04 '14 at 03:33

score 0 · Accepted Answer · edited May 23 '17 at 10:31

I wasn't able to reproduce this exact issue, but it sounds like the problem is caused by hovering over the child elements of the div firing the onmouseout event of the parent div. I found this answer that should help you with that: prevent onmouseout when hovering child element of the parent absolute div.

I also noticed that you are changing display to none. Once the display is set to none, the div won't render at all on the browser, which will prevent mouse events from firing on it, so hovering in that area will not cause it to reappear. I found another answer here about hovering over a hidden element to reveal it: Hover over a hidden element to show it.

Also, it seems like you are missing an onmouseover event to reveal the drop down list when you hover over it, although I may be mistaken in what you are trying to accomplish.

So in all, with two modifications to your Javascript and a small modification to your HTML, I think you can achieve your intended result with this:

<div onmouseout="hideServersDropDown(event)" onmouseover="showServersDropDown(event)" id="serversDropDown">
    <p>Live Map</p>
   </div> <!--This ends the Server List Drop Down Div-->

function showServersDropDown(event) {
    document.getElementById("serversDropDown").style.opacity="1";
}

function hideServersDropDown(event) {
    var e = event.toElement || event.relatedTarget;
    if (e.parentNode == this || e == this) {
       return;
    }
    document.getElementById("serversDropDown").style.opacity="0";
}

I only put the event blocking code in hideServersDropDown since you would want the onmouseover event to fire and show whether you are hovering over a parent or a child in the div. I hope this helps!

I don't want it to become visible when you put your mouse over it. There is an area that fires showServersDropDown() when you mouse over it. Therefore, I can still use display: none, correct? — Emanuel Elliott, Feb 04 '14 at 19:48
Yes, in that case you should be able to still use display none. You could also remove the onmouseover="showServersDropDown(event)" Part of the div. — JPLynk, Feb 05 '14 at 01:10

Drop down div doesn't stay visible

2 Answers2