hello I have a menu made up of lists, I want to hide the rest of the list; that when I pass the mouse over the vendor list, the menu is displayed. Using the pseudo-class hover. Also that when passing the mouse over each list, it shows it to me in a backgroundd-color using only hover. I have tried in all possible ways, it does not want to work for me; I even saw some tutorials but I got lost I don't know how to make it work, if you help me with the vendor list it's enough; to have some basis.
.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>