Eso pasa por que el elemento que debe tener el `hover` es el padre directo del menú desplegable y no su hermano (en este caso la etiqueta `<a>`). Cuando estás intentando salir de la etiqueta `<a>` para ingresar al menú desplegable estás terminando la ejecución del `hover` y es por eso que se vuelve a desaparecer, mientras que si su elemento padre fuera el que tuviera el `hover` sin importar si estas encima de la `<a>` o del menú desplegable vas a seguir estando en el elemento que tiene el `hover`. Espero haber sido claro, si tienes dudas con gusto las responderé. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> nav{ height: 50px; background-color: black; display: flex; justify-content: center; align-items: center; } .nav{ padding-top: 15px; } .nav-pills .nav-link.active, .nav-pills .show>.nav-link{ background-color: red; } .nav-link{ color: red; } .nav-link:hover { color: #fff; } /* Control de los submenús */ .submenu{ display: none; position: absolute; } .mostrar:hover > .submenu { display: block; background-color: black; border-radius: 10px; } .menu{ display: block; } <!-- language: lang-html --> <nav> <ul class="nav nav-pills mb-3" role="tablist"> <li> <a class="nav-link active" data-toggle="pill" href="#inicio" role="tab" aria-controls="inicio" aria- selected="true">Inicio</a> </li> <li class="mostrar"> <a class="nav-link" data-toggle="pill" href="#trabajos" role="tab" aria-controls="trabajos" aria-selected="true">Servicios</a> <ul class="nav nav-pills mb-3 submenu" role="tablist"> <li> <a class="nav-link" data-toggle="pill" href="#ebanisteria" role="tab" aria-controls="ebanisteria" aria-selected="true">Servicio 1</a> </li> <li> <a class="nav-link" data-toggle="pill" href="#restauracion" role="tab" aria-controls="restauracion" aria-selected="true">Servicio 2</a> </li> </ul> </li> </ul> </nav> <!-- end snippet -->