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 <span aria-hidden="true" class="three-d-box"> <span class="front">Servers</span> <span class="back">Servers</span> </span> </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";
}

Answer 1

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!

Answer 2

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 }