1

hola tengo un menu conformado por listas, quiero ocultar el resto de la lista; que al pasar el mouse por la lista vendedor me desplegue el menu. Usando la pseudoclase hover. Tambien que al pasar el mause por cada lista, me la muestre en un backgroundd-color usando solo hover. he intentado de todas las formas posibles, no me quiere funcionar; hasta vi algunnos tutoriales pero me perdi no se como hacer para que funcione, con que me ayude con la lista vendedor es suficiente; para tenner algunna base.

.example{
    display:grid;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}
:root{
    --color-bg:white;
    --color-primary-header: darksalmon;
    --color-primary-login-cuenta: antiquewhite;
    --color-primary-menu: aqua;
}

*,
*::before,
*::after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    background-color: var(--color-bg);
    color: darkred;
    overflow-x: hidden;
    overflow-y: scroll;
   line-height: 1.3rem;
}

.header{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 32vh;
    padding: 0;
    margin: 0;
    display: block;
    background-color: var(--color-primary-header);
}

.header__container--cliente{
    padding: .0625rem 1.5rem;
    margin: auto;
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: space-around;
    background-color: red;
}


.header__container--cliente > .menu--nav{
    padding: auto;
    margin: auto;
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: space-around;
    background-color: var(--color-primary-menu);
}
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Factura electronica</title>
        <meta name="Factura" content="pagar" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"/>
    <!--estilos css-->
    <!--icons fonts-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="estilos-por-defecto-CSS/normalize.css" />
    <link rel="stylesheet" href="CSS3/estilo-24-1.css" />
    <link rel="manifest" href="favic//manifest.json" />
    <!--iconos-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
    <script src="https://kit.fontawesome.com/2de33adb02.js" crossorigin="anonymous"></script>
    </head>
    <body>
        <header class="header">
            <div class="header__container--cliente">
                <nav class="menu--nav">
                    <ul class="menu__ul--vendedor">
                        <li class="menu__vendedor-li"><h2 class="menu__vendedor">Vendedor</h2> 
                            <ul class="menu__sub--vendedor">
                                <li class="menu--ul__vendedor">
                                    <a class="menu__a--sub" href="">Cuenta</a>
                                </li>
                                <li class="menu--ul__vendedor">
                                    <a class="menu__a--sub" href="">Mi tienda</a>
                                </li>
                                <li class="menu--ul__vendedor">
                                    <a class="menu__a--sub" href="">Descuento</a>
                                </li>
                                <li class="menu--ul__vendedor">
                                    <a class="menu__a--sub" href="" title="Calculadora de ganancias">Calculadora</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <h2 class="menu__inicio">
                        <a href="" target="_self" class="menu--nav__inicio"><i class="fa-solid fa-house"></i>Inicio</a>
                    </h2>
                    <ul class="menu__ul--shop">
                        <li class="menu--nav__shop-li"><h2 class="menu--nav__shop">Tienda</h2>
                            <ul class="menu__sub--shop">
                                <li class="menu--ul__descuento">
                                    <a class="menu--sub-1__a" href="">Descuentos</a>
                                </li>
                                <li class="menu--ul__descuento">
                                    <a class="menu--sub-1__a" href="">Favorito</a>
                                </li>
                                <li class="menu--ul__descuento">
                                    <a class="menu--sub-1__a" href="">Seguir producto/vendedor</a>
                                </li>
                                <li class="menu--ul__descuento">
                                    <a class="menu--sub-1__a" href="">Historial</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <h2 class="menu--nav__invoice"><a href="" target="_self" class="menu--nav__invoice-a">Factura</a></h2>
                    <ul class="menu__ul--pago">
                        <li class="menu--nav__pago-li"><h2 class="menu--nav__pago">Pagos</h2>
                            <ul class="menu__sub--pago">
                                <li class="menu--ul__pago">
                                    <a class="menu--sub-2__a" href="">Tarjetas</a>
                                </li>
                                <li class="menu--ul__pago">
                                    <a class="menu--sub-2__a" href="">Transferencia bancaria</a>
                                </li>
                                <li class="menu--ul__pago">
                                    <a class="menu--sub-2__a" href="">Efectivo</a>
                                </li>
                                <li class="menu--ul__pago">
                                    <a class="menu--sub-2__a" href="">Otros metodos de pago</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <h2 class="menu--nav__cart-shopping"><a href="" target="_self" class="menu--nav__cart-shopping-a"><i class="fa-solid fa-cart-shopping"></i>Carrito</a></h2>
                </nav>
            </div>
        </header>
    </body>
</html>

1

2 respuestas 2

0

Prueba este código

.menu--nav > ul ul {
   display: none
}
.menu--nav > ul:hover ul {
   display: block
}
0

Para lograr un menú desplegable con :hover de CSS, primero voy a explicar un breve método muy fácil y correcto.

Primero se debe tener un contenedor padre, en tu caso es un li. Este elemento siempre está visible y activo para recibir el evento :hover. Y éste tiene una etiqueta h2 como titulo, lo que en realidad es esté el que se ve en cada menú (li):

<li>
    <h2 class="hover">Vendedor</h2> 
</li>

Al hacer hover sobre éste li (que en realidad es el h2 que se ve), ya se puede hacer lo que deceas. Por ejemplo mostrar algo, pero algo que está oculto, y el que está oculto es el ul:

<li>
    <h2 class="hover">Vendedor</h2> 

    <ul class="ver">
       ...
    </ul>
</li>

Para que se vea bien el menú desplegable ul, debe estar de forma absoluta, posicionando encima de todos. Pero, el contenedor li, su padre, debe ser de posición relativa.

Todos deben estar dentro de li, y solamente se oculta el ul para luego mostrar al hacer hover sobre li.

Modifiqué bastante el código original (HTML y CSS) para poder presentar el ejemplo correctamente. Observa detalladamente para entender la estructura.

La clase que actúa para mostrar el menú es ver del h2.

            
            :root{
--color-bg:white;
--color-primary-header: darksalmon;
--color-primary-login-cuenta: antiquewhite;
--color-primary-menu: aqua;
--height: 55px
}

*,*::before,*::after {
padding: 0;
margin: 0;
box-sizing: border-box
}

a {
text-decoration: none
}

.example {
display:grid;
transition: all .5s;
user-select: none;
background: linear-gradient(to bottom, white, black)
}

body {
background-color: var(--color-bg);
color: darkred;
overflow-x: hidden;
overflow-y: scroll;
line-height: 1.3rem;
}

.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 32vh;
padding: 0;
margin: 0;
display: block;
background-color: var(--color-primary-header)
}

.header__container--cliente {
padding: .0625rem 1.5rem;
margin: auto;
width: 100%;
height: var(--height);
display: flex;
align-content: center;
justify-content: space-around;
background-color: red
}

.header__container--cliente > .menu--nav {
position: relative;
padding: auto;
margin: auto;
width: 100%;
height: var(--height);
display: flex;
align-content: center;
justify-content: space-around;
background-color: var(--color-primary-menu)
}

ul.ver {
   display: flex;
justify-content: flex-start;
flex-direction: column;
position: absolute;
z-index: 1000;
top: var(--height);
width: auto;
height: 0;
padding: 1rem .50rem;
opacity: 0;
visibility: hidden;
background-color: var(--color-primary-menu);
transition: all 0.3s ease-in-out
}

.hover:hover ul.ver {
height: auto;
opacity: 1;
visibility: visible
}

h2 {
display: flex;
align-items: center;
height: var(--height);
} .hover h2 {
color: red
}

li {
list-style: none
}
            
            
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"> 

<header class="header">
            <div class="header__container--cliente">
                <nav class="menu--nav">
                    <ul class="menu__ul--vendedor">
                        
                        <li class="menu__vendedor-li hover">  
                            
                            <h2 class="menu__vendedor"><i class="fa-solid fa-person"></i> Vendedor</h2> 
                            
                            <ul class="menu__sub--vendedor ver">
                                <li class="menu--ul__vendedor">
                                    <a class="menu__a--sub" href="">Cuenta</a>
                                </li>
                                <li class="menu--ul__vendedor">
                                    <a class="menu__a--sub" href="">Mi tienda</a>
                                </li>
                                <li class="menu--ul__vendedor">
                                    <a class="menu__a--sub" href="">Descuento</a>
                                </li>
                                <li class="menu--ul__vendedor">
                                    <a class="menu__a--sub" href="" title="Calculadora de ganancias">Calculadora</a>
                                </li>
                            </ul>
                        </li>
                        
                    </ul>
                    
                    
                    <li class="hover">
                        
                        <h2 class="menu__inicio"><i class="fa-solid fa-house"></i> Inicio</h2>  
                        
                        <ul class="menu__ul--shop ver">
                        <li class="menu--nav__shop-li"><h2 class="menu--nav__shop">Tienda</h2>
                            <ul class="menu__sub--shop">
                                <li class="menu--ul__descuento">
                                    <a class="menu--sub-1__a" href="">Descuentos</a>
                                </li>
                                <li class="menu--ul__descuento">
                                    <a class="menu--sub-1__a" href="">Favorito</a>
                                </li>
                                <li class="menu--ul__descuento">
                                    <a class="menu--sub-1__a" href="">Seguir producto/vendedor</a>
                                </li>
                                <li class="menu--ul__descuento">
                                    <a class="menu--sub-1__a" href="">Historial</a>
                                </li>
                            </ul>
                        </li>
                        </ul>
                    </li>
                    
                    <li class="hover"> 
                        
                    <h2 class="menu--nav__invoice"><i class="fa-solid fa-file"></i> Factura</h2>
                    
                    <ul class="menu__ul--pago ver">
                        <li class="menu--nav__pago-li"><h2 class="menu--nav__pago">Pagos</h2>
                            <ul class="menu__sub--pago">
                                <li class="menu--ul__pago">
                                    <a class="menu--sub-2__a" href="">Tarjetas</a>
                                </li>
                                <li class="menu--ul__pago">
                                    <a class="menu--sub-2__a" href="">Transferencia bancaria</a>
                                </li>
                                <li class="menu--ul__pago">
                                    <a class="menu--sub-2__a" href="">Efectivo</a>
                                </li>
                                <li class="menu--ul__pago">
                                    <a class="menu--sub-2__a" href="">Otros metodos de pago</a>
                                </li>
                            </ul>
                        </li>
                        </ul>
                    </li>
                    
                    <h2 class="menu--nav__cart-shopping"><a href="" target="_self" class="menu--nav__cart-shopping-a"><i class="fa-solid fa-cart-shopping"></i>Carrito</a></h2>
                </nav>
            </div>
        </header>

            

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.