los vengo a molestar con una pavada pero que no logro destrabar, habra forma de agregar tipo sub-menu al siguiente dropdown? Necesito que en cada uno de los botones despliegue opciones y cada opcion sea un link que lleve a una determinada pagina, desde ya les agradezco si me pudieran ayudar. Saludos y lo que pongo aqui es para que me deje cerrar la pregunta el sistema ya que dice que mi pregunta es mayormente codigo y no tiene mucha descripcion esto sigue sin dejarme cerrar asique le cuento que necesito ese dropdown para una pagina comercial que tiene que desplegar algunas opciones de mucha utilidad para los usuarios
introducir el código aquí
*{
padding:0;
margin:0;
}
body{
background:rgb(194, 245, 194);
overflow:hidden;
}
nav{
background-color:transparent;
margin-top:50px;
}
div.container{
display:flex;
justify-content: center;
column-gap:20px;
}
div.tab{
color:white;
margin-left:20px;
cursor:pointer;
font-size: 20px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-weight: bold;
padding:10px auto 0 auto;
background-color:transparent;
text-align: center;
width: 100px;
height: 50px;
text-shadow: 2px 2px black;
transition: all 0.3s;
border:1px solid black;
border-radius: 10px;
border-bottom:4px solid black;
box-shadow:2px 2px 3px black;
position: relative;
}
div.tab:hover{
text-shadow:none;
color:black;
background-color: white;
border:1px solid black;
border-bottom:4px solid rgb(1, 4, 12);
}
div.tab::after{
content: "";
visibility: hidden;
z-index: 2;
position: absolute;
top:110%;
left:50%;
transform:translate(-50%,-50%);
border-width: 0px 0.7vw 0.7vw 0.7vw;
border-color: transparent transparent white transparent;
border-style: solid;
transition: visibility
}
div.tab:hover::after{
visibility: visible;
border-style: solid;
}
div.sub-tab{
height: 0px;
width: 0px;
visibility: hidden;
overflow:hidden;
z-index: 2;
position: absolute;
top:314%;
left:50%;
transform:translate(-50%,-50%);
border-radius: 10px;
box-shadow: 0px 2px 2px 2px black;
background-color: white;
transition: all 0.4s;
text-shadow: 1px 1px grey;
}
div.tab:hover div.sub-tab{
width: 300px;
height: 200px;
visibility: visible;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>hover-dropdown</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="new.css" />
</head>
<body>
<nav>
<div class="container">
<div class="tab">Hover-1
<div class="sub-tab one"><span class="sub-content">Hover-One</span>
<ul class="Menu_profile_box">
<li><a href="/">Cuenta</a></li>
<li><a href="/">Cerrar Sesion</a></li>
</ul>
</div>
</div>
<div class="tab">Hover-2
<div class="sub-tab two"><span class="sub-content">Hover-Two</span></div>
</div>
<div class="tab">Hover-3
<div class="sub-tab three"><span class="sub-content">Hover-three</span></div>
</div>
<div class="tab">Hover-4
<span class="sub-content">Hover-Four</span></div>
</div>
</div>
</nav>
</body>
</html>