The drop-down menu disappears after hovering

Good evening all,

I have tried to create a navigation in which a main category has various subcategories. If you hover over the main category, the subcategories should appear.

So far it works, but the list of subcategories does not disappear afterwards but remains after the hover.

I tried to create a function using MouseOut (In the following code this is commented out) but if I move the Mouse, the Navigation dissapear to soon.

The code is for test purposes only, so the JS is not stored in a separate file.

* {
    padding: 0;
    margin: 0;
}

#Hauptnavi {
    background-color: gray
}

nav ul li {
    list-style-type: none;
}

nav ul li a {
    text-decoration: none;
}

#Unternavi {
    opacity: 0;
    visibility: none; 

}

<body>
<nav role="Navigation">
    <ul id="Hauptnavi">
        <li><a href="#">Start</a></li>
        <li id="Servicehover"><a href="#">Service</a></li>
            <ul id="Unternavi">
                <li><a href="#">Unterseite A</a></li>
                <li><a href="#">Unterseite B</a></li>
                <li><a href="#">Unterseite C</a></li>
            </ul>
        <li><a href="#">Contact</a></li>
    </ul>

</nav>


<script>
document.getElementById("Servicehover").addEventListener("mouseover", MouseOver);
/* document.getElementById("Hauptnavi").addEventListener("mouseout", MouseOut); */

function MouseOver() {
    document.getElementById("Unternavi").style.visibility = "visible";
    document.getElementById("Unternavi").style.opacity = 1;
}

/*
function MouseOut() {
    document.getElementById("Unternavi").style.visibility = "none";
    document.getElementById("Unternavi").style.opacity = 0;
} */

</script>
</body>
</html>

What is the best way to realize this case? I don't need a ready-made solution, just some advice on how to go about it correctly.

Thanks a lot.

I tried to create a function using MouseOut (In the following code this is commented out) but if I move the Mouse, the Navigation dissapear to soon.

I also tried to use a click event but it only worked with "document.getElementById("Hauptnavi").... if i tried to access the id "Servicehover" it doesn't work.

Solution

You can try this code. When you mouseover you set visibility to visible and you need to add an eventlistener for mouseout to set back visibility to none. I also added a default height:0px; that changes on mouseover to 100% and vice versa. Also put your style 'value' between quotes. You also need to put your 'unternavi' ul inside your 'Servicehover' li like this when mouseovering the children li it stays as you are still mouseovering Servicehover so visibility is visible

document.getElementById("Servicehover").addEventListener("mouseover", MouseOver);
document.getElementById("Servicehover").addEventListener("mouseout", MouseOut);

function MouseOver() {
    document.getElementById("Unternavi").style.visibility = "visible";
    document.getElementById("Unternavi").style.opacity = "1";
    document.getElementById("Unternavi").style.height = "100%"
}


function MouseOut() {
    document.getElementById("Unternavi").style.visibility = "none";
    document.getElementById("Unternavi").style.opacity = "0";
    document.getElementById("Unternavi").style.height = "0";
}

* {
  padding: 0;
  margin: 0;
}

#Hauptnavi {
  background-color: gray
}

nav ul li {
  list-style-type: none;
}

nav ul li a {
  text-decoration: none;
}

#Unternavi {
  height: 0;
  opacity: 0;
  visibility: none; 
}

  <nav role="Navigation">
    <ul id="Hauptnavi">
        <li><a href="#">Start</a></li>
        <li id="Servicehover">
          <a href="#">Service</a>
          <ul id="Unternavi">
            <li><a href="#">Unterseite A</a></li>
            <li><a href="#">Unterseite B</a></li>
            <li><a href="#">Unterseite C</a></li>
        </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>