Skip to main content
se añadieron 351 caracteres en el cuerpo
Origen Enlace

Ten en cuenta que no puedes hacer :hover sobre un elemento que esta oculto, en tu caso estas apuntando el :hover sobre el li que has iniciado como oculto

<style> 
    .menu a:hover + ul {
            background-color:red;
            display: block;
        }
        
    .menu ul{
            display:none;
            position:absolute;
            min-width:140px;
        }   
</style>

Yo ocultaría el ul y apuntaria el :hover sobre el <a> que esta visible siempre y sobre todo porque es un elemento hermano y se encuentra antes que el elemento que quieres modificar, regla imprescindible.

EDITO:

En caso de que no quieras que la lista se sobreponga a lo que hay debajo, quita el position:absolute;, quedando finalmente asi:

<style> 
    .menu a:hover + ul {
            display: block;
        }

    .menu ul{
            display:none;
            min-width:140px;
        }   
</style>

Ten en cuenta que no puedes hacer :hover sobre un elemento que esta oculto, en tu caso estas apuntando el :hover sobre el li que has iniciado como oculto

<style> 
    .menu a:hover + ul {
            background-color:red;
            display: block;
        }
        
    .menu ul{
            display:none;
            position:absolute;
            min-width:140px;
        }   
</style>

Yo ocultaría el ul y apuntaria el :hover sobre el <a> que esta visible siempre y sobre todo porque es un elemento hermano y se encuentra antes que el elemento que quieres modificar, regla imprescindible.

Ten en cuenta que no puedes hacer :hover sobre un elemento que esta oculto, en tu caso estas apuntando el :hover sobre el li que has iniciado como oculto

<style> 
    .menu a:hover + ul {
            background-color:red;
            display: block;
        }
        
    .menu ul{
            display:none;
            position:absolute;
            min-width:140px;
        }   
</style>

Yo ocultaría el ul y apuntaria el :hover sobre el <a> que esta visible siempre y sobre todo porque es un elemento hermano y se encuentra antes que el elemento que quieres modificar, regla imprescindible.

EDITO:

En caso de que no quieras que la lista se sobreponga a lo que hay debajo, quita el position:absolute;, quedando finalmente asi:

<style> 
    .menu a:hover + ul {
            display: block;
        }

    .menu ul{
            display:none;
            min-width:140px;
        }   
</style>
Origen Enlace

Ten en cuenta que no puedes hacer :hover sobre un elemento que esta oculto, en tu caso estas apuntando el :hover sobre el li que has iniciado como oculto

<style> 
    .menu a:hover + ul {
            background-color:red;
            display: block;
        }
        
    .menu ul{
            display:none;
            position:absolute;
            min-width:140px;
        }   
</style>

Yo ocultaría el ul y apuntaria el :hover sobre el <a> que esta visible siempre y sobre todo porque es un elemento hermano y se encuentra antes que el elemento que quieres modificar, regla imprescindible.