Intento hacer un menú desplegable y no puedo hacer que se mantenga presionado después de pasar el mouse sobre una opción

Soy muy nuevo en hacer cualquier cosa con código y no he tenido mucha suerte para encontrar la solución a mi problema. Estoy tratando de hacer una opción de menú desplegable, pero el menú se cierra tan pronto como trato de mover el mouse a las otras opciones. Parece que estoy trabajando cuando uso la opción de ejecución aquí, así que si alguien tiene alguna idea de lo que estoy haciendo mal en el sitio, ¡hágamelo saber! ¡gracias!

el sitio es https://hntrsvg.cargo.site/ por cierto

Aquí está el HTML y CSS (estoy usando Cargo Collective para el sitio)

<style>
 
}
.dropdown {
 position: relative;
 display: inline-block;
 background-color: none;
 text-shadow: 0px 8px 16px rgba(15, 206, 131, 1);
}
.dropdown-content {
 display: none;
 position: relative;
 z-index: 1;
}
.dropdown:hover.dropdown-content, dropdown-content:hover {
 display: block;
}
</style>

<div class="dropdown" grid-col="x11" grid-pad="2">
<h2><a href="#" rel="home_page">GALLERY</a></h2>
<div class="dropdown-content">
 
 <p></p><h2><a href="Comic-Home-Page" rel="comics">COMICS</a></h2>
 <p></p><h2><a href="Illustrations" rel="comics">ILLUSTRATIONS</a> </h2>
 
 </div>
</div>
</div>

Solución del problema

¡En realidad lo descubrí! ¡Resulta que mi espacio entre líneas estaba haciendo que hubiera una gran brecha entre todo y eso causó el problema!