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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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