0

Lo que quiero es abrir un div justo al hacer hover sobre el icono de perfil o el de carrito tal y como hace esta pagina: introducir la descripción del enlace aquí

1
  • Por favor, edita la pregunta para limitarla a un problema específico con suficiente detalle para identificar una respuesta adecuada.
    – Comunidad Bot
    el 2 sep. 2021 a las 11:59

1 respuesta 1

1

Mmmm podrias hacer algo cómo así

Lo hice de rápido, faltan afinar detalles, espero que te ayude a comprender un poco los elementos.

<html>
    <head>
        <title>Menú</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
        <style>
            .linea {
                border-top-style: solid;
                margin: 4px 0px;
            }
            .lineaAbsoluta{
                /*Usar solo dentro de elemento con position relative o absolute*/
                /* Diferente a .line de arriba porque la de arriba al ser position: static (por defecto)
                 * debe respetar los padding del contenedor padre
                */
                position: absolute;
                width: 100%;
                border-top-style: solid;
                margin: 4px 0px;
                left: 0;
            }
            #menu ul{
                background-color: white;
                list-style: none;
                padding: 0px;
            }
            #menu>ul>li{
                display: inline-block;
                position: relative; /*Muy importante*/
                text-decoration: none;
                padding: 7px;
                padding-right: 20px;
                border: solid 2px white;
                cursor: pointer;
            }
            #menu>ul>li.tieneSubmenu:after{
                position: absolute;
                content: "";
                width: calc(100% + 4px);
                bottom: -2px;
                left: 0;
                border-top: solid white;
                display: block;
                z-index: 2;
                
            }
            #menu .submenu{ 
                /* Submenu puede ser un ul o div o lo que sea*/
                position: absolute;
                /* Los 2px se refieren al grosor del borde*/ 
                top: calc(100% + 2px);
                left: -2px;
                display: none;
                padding: 5px;
                background-color: white;
                border: solid black 2px;
                white-space: nowrap;
                cursor: default;
            }
            #menu .submenu li {
                font-size: 1.3em;            
                display: list-item;
                padding: 7px 0 7px 10px;
            }
            .textoLista{
                cursor: pointer;
            }
            .textoLista:hover {
                text-decoration: underline;
            }
            #menu li:hover{
                border-color: black;
            }
            #menu li:hover>.submenu{
                /* Al hacer hover sobre un li, todo el contenedor submenu se muestra */
                display: block;
            }
            
            .botonRelleno{
                font-family: Arial;
                color: white;
                padding: 7px 25px;
                font-size: 1.4em;
                font-weight: bold;
                background-color: black;
                cursor: pointer;
                min-width: 150px;
            }
            .botonRelleno:hover{
                opacity: 0.7;
            }
        </style>
    </head>
    <body>
        <div id="menu">
            <ul>
                <li class="tieneSubmenu">
                    <span class="material-icons">person</span>
                    <div class="submenu">
                        <div class="botonRelleno">Iniciar sesion</div>
                        <div class="lineaAbsoluta"></div>
                        <ul>
                            <li>
                                <span class="textoLista">Hola</span>
                            </li>
                            <li>
                                <span class="textoLista">Que tal</span>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <span class="material-icons">favorite</span>
                </li>
                <li>
                    <span class="material-icons">shopping_cart</span>
                </li>
            </ul>
        </div>
    </body>
</html>


3
  • Por favor, proporciona detalles adicionales en tu respuesta. Tal como está escrita actualmente, es difícil entender tu solución.
    – Comunidad Bot
    el 3 sep. 2021 a las 4:47
  • @Comunidad Lo siento, no lo haré, creo que di una respuesta suficiente, además me esforcé. Igual si quieren borrar mi respuesta, háganlo. Saludos.
    – Noé
    el 3 sep. 2021 a las 18:44
  • @Comunidad igual t invito a que tú des tu respuesta.
    – Noé
    el 3 sep. 2021 a las 18:45

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.