0

Hola soy nuevo en el desarrollo y estoy intentando agregar un down menu a este codigo:

este es mi codigo css3 actual :

* {
  margin: 0px;
  padding: 0px;
}
nav {
width:100%;
  display:flex;
    align-items: center;
  justify-content: center;
    background: rgb(255, 255, 255);
    z-index:100;
}
nav a {
font-size: 14px;
  outline: none;
  text-decoration: none !important;
  text-transform: none;
  font-family: arial;
  transition: all .3s ease;
}
nav a:hover {
  color: rgb(168, 142, 76) !important;
}
nav img {
  margin-left:15px;
  margin-right: 15px;
  width:100px;
  height:100px;

}

    /*Flecha para hacer la pagina hacia arriba*/
    .ir-arriba {
       border:1px solid green;
       border-radius:30%;
       border-right:10%;
        display:none;
        padding:30px;
        background-repeat: no-repeat;
        font-size:20px;
        color:black;
        cursor:pointer;
        position: fixed;
        bottom:20px;
        right:20px;
        z-index: 2;
    }

<header>
          <nav>
       <br> <br><br><br>
       <br> <br><br><br>
       <br> <br><br><br>
       <br> <br><br><br>
       <li style="display:inline-block;float:left; padding:10px; font-weight:bold;"><a style="color:black; " href="#">HOME</a></li>
       <li style="display:inline-block;float:left; padding:10px; font-weight:bold;"><a style="color:black;"  href="#">PRODUCT</a>

       <ul><li><a href="#">Link</a></li></ul>
       <ul><li><a href="#">Link</a></li></ul>
       <ul><li><a href="#">Link</a></li></ul>
       <ul><li><a href="#">Link</a></li></ul>
          
            </li>
       <li style="display:inline-block;float:left; padding:10px; font-weight:bold;"><a style="color:black;"  href="#">services</a></li>
       <img src="img/logo.png" alt="eror">
       <li style="display:inline-block;float:left; padding:10px; font-weight:bold;"><a style="color:black;"  href="#">blog</a></li>
       <li style="display:inline-block;float:left; padding:10px; font-weight:bold;"><a style="color:black;"  href="#">shop</a></li>
       <li style="display:inline-block;float:left; padding:10px; font-weight:bold;"><a style="color:black;"  href="#">contacts</a></li>
       
      
     </nav>
<div class="container" id="video" style="height:1000px;"
  data-vide-bg="video/1_1" data-vide-options="loop: false, muted: false, position: 0% 0%">
<h1>HOLA</h1>
  </header>

como ven estoy intentando agregarselo.

Alguien sabe una manera de agregarselo ? :(

1 respuesta 1

1

asumo que eres nuevo en html y css, ya que hay varios errores de concepto en el codigo que has puesto, pero para eso estamos aca para aprender de los errores tambien.

Por ejemplo colocar estilos en linea en los tags, no es bueno, te conviene usar clases o referenciar a los tag desde el css.

Tambien tienes un error en los conceptos de las listas (ul y li), fijate que en mi codigo te lo eh corregido.

Hay muchas maneras de crear un down menu , te modifique el codigo para que funcione, fijate bien como lo hago en el css.

A qui esta la clave:

li>ul { display: none; position: absolute; top:100%; left:0; }

li>ul li { width: 100%; background: gray; }

li:hover>ul { display: inline-block; }

Espero que te ayude, cualquier cosa pregunta, saludos.

* {
  margin: 0px;
  padding: 0px;
}

nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(255, 255, 255);
  z-index: 100;
}

nav a {
  font-size: 14px;
  outline: none;
  text-decoration: none !important;
  text-transform: none;
  font-family: arial;
  transition: all .3s ease;
  color: black;
}

nav img {
  margin-left: 15px;
  margin-right: 15px;
  width: 100px;
  height: 100px;
}

li {
  display: inline-block;
  padding: 10px;
  font-weight: bold;
  background: white;
  position:relative;
}

li:hover {
  background: black;
}

li:hover a {
  color: rgb(168, 142, 76);
}

li>ul {
  display: none;
  position: absolute;
  top:100%;
  left:0;
}

li>ul li {
  width: 100%;
  background: gray;
}

li:hover>ul {
  display: inline-block;
}


/*Flecha para hacer la pagina hacia arriba*/

.ir-arriba {
  border: 1px solid green;
  border-radius: 30%;
  border-right: 10%;
  display: none;
  padding: 30px;
  background-repeat: no-repeat;
  font-size: 20px;
  color: black;
  cursor: pointer;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 2;
}
<header>
  <nav>
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">PRODUCT</a>
        <ul>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </li>
      <li><a href="#">services</a></li>
      <li><a href="#">blog</a></li>
      <li><a href="#">shop</a></li>
      <li><a href="#">contacts</a></li>
    </ul>
  </nav>
  <div class="container" id="video" style="height:1000px;">
    <h1>HOLA</h1>
  </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.