0

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>

1 respuesta 1

0

No creo que estés utilizando las etiquetas html correctamente,Te voy a compartir un pequeño código en el cual puedes basarte y para mejorar tus estilos te recomiendo utilizar metodologías de css.

<style>
.header {
  background-color: #004777;
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
}

.header_img {
  width: 80px;
  margin-top: 5px;
  height: 65px;
  padding: 0px 25px;
}

.header_img_profile {
  width: 50px;
  height: 50px;
  margin-top: 14px;
  margin-right: 0px;
}

.header_Menu {
  padding-top: 5px;
}

.header_Menu_profile p {
  margin: 30px 2px auto;
  padding: 0px;
  color: white;
}

.header_Menu ul {
  display: none;
  list-style: none;
  padding: 0px;
  position: absolute;
  width: 100px;
  text-align: right;
  margin: 0px 0px 0px -14px;
}

.header_Menu:hover ul, ul:hover {
  display: block;
}

.header_Menu li {
  margin: 10px 0px;
}

.header_Menu li a {
  background-color: #004777;
  margin: 10px 0px;
  color: white;
  text-decoration: none;
}

.Menu_profile_box {
  background-color: #004777;
  border: 5px solid #004777;
  border-radius: 5%;
}

.header_Menu li a:hover {
  text-decoration: underline;
}

.header_Menu_profile {
  display: flex;
  margin-right: 50px;
  width: 89px;
}

.headder_pagename {
  color: white;
  font-family: "Anton", sans-serif;
  font-size: 30px;
  padding: 0px;
  margin-top: 22px;
  margin-left: 20px;
}

</style>

<header class="header">
    <div class="header_Menu">
<div class="header_Menu_profile">
    <img class="header_img_profile" src="./Icon_profile.png" alt="Icon_profile.png">
    <p>Perfil</p>
</div>

<ul class="Menu_profile_box">
<li><a href="/">Cuenta</a></li>
<li><a href="/">Cerrar Sesion</a></li>
</ul>

    </div>
</header>
3
  • La verdad que es que encontre ese codigo en internet y me gusto, pero no logro hacer que se convierta en dropdown con sub menues ... ahi veo el codigo que me pasaste a ver si rescato algo, gracias
    – Emideramos
    Commented el 8 may. 2020 a las 23:49
  • quedo perfecto crack, mira el primer boton, mil gracias !!!!
    – Emideramos
    Commented el 8 may. 2020 a las 23:54
  • De nada ,no olvides marcar la palomita como respuesta y botar por ella para que también ayudes al desarrollador. Commented el 8 may. 2020 a las 23:55

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.