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>
try this code
To achieve a dropdown menu with
:hover
CSS, I will first explain a very easy and correct short method.First you must have a parent container, in your case it is a
li
. This element is always visible and active to receive the event:hover
. And this one has a labelh2
as a title, which is actually the one you see in each menu (li
):By hovering over it
li
(which is actually theh2
one you see), you can do what you want. For example show something, but something is hidden, and the one that is hidden is theul
:For the dropdown menu to look good
ul
, it must be absolutely, positioned on top of all. But, the containerli
, its parent, must be positionally relative.They must all be inside
li
, and only the is hiddenul
and then shown when hovering overli
.I modified the original code (HTML and CSS) a lot to be able to present the example correctly. Look closely to understand the structure.
The class that acts to display the menu is
ver
delh2
.