How to create a Down menu?

Question

How to create a Down menu?

Navigation

#1 by (1 votes)

0

Hi, I'm new to the development and I'm trying to add a down menu to this code:

this is my current css3 code:

* {
  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>

As you can see, I'm trying to add it to you.

Does anyone know a way to add it? : (

html5 css3

asked by Gilberto 10.12.2017 в 20:25

source

1 answer

window.location.replace (); it does not work Help with Java inheritance, inherit variables

score 1 · Answer 1

I assume that you are new to html and css, since there are several misconceptions in the code that you have put, but for that we are here to learn from the errors as well.

For example, putting styles online in tags, is not good, you should use classes or reference the tags from the css.

You also have an error in the concepts of the lists (ul and li), notice that in my code I have corrected it.

There are many ways to create a down menu, modify the code to work, look well as I do in the css.

To whom is the key:

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

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

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

I hope it helps you, anything you ask, regards.

* {
  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>