How to create a drop-down navigation menu with CSS

An excellent and attractive navigation menu is crucial for your website. Navigation menus are critical for the superb accessibility of your website. Users like well-designed websites.

Today’s tutorial is about how to create a drop-down navigation menu on a web app. Let’s create an excellent drop-down navigation menu together step by step.

There are three ways to create a drop-down menu by Flash, JavaScript, and CSS/HTML.

We’re going to show the CSS/HTML based menu tutorial because it has some advantages. It is the way to create easier and has smaller application size.

Using CSS/HTML is the best way to avoid JavaScript conflicts. Besides, the CSS/HTML based menu can be used by more people.

1. Create HTML.

As always our tutorial starts by creating HTML.

  • Create an <div> element with an id of the wrap. Create <ul> tag in your <div> element with a class of "navbar". <ul> tag is used for specifying an unordered list, which groups a collection of items having no numerical order. Each element of an unordered list is declared inside the <li> tag.
  • Write the content that you want to show in your menu inside the <li> tag.
<div id="wrap">
<ul class="navbar">
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">Books</a>
    <ul>
      <li><a href="#">Learn HTML</a></li>
      <li><a href="#">Learn CSS</a></li>
      <li><a href="#">Learn JavaScript</a></li>
      <li><a href="#">Learn PHP</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Quizzes</a>
    <ul>
      <li><a href="#" >CSS Basic</a></li>
      <li><a href="#">PHP Basic</a></li>
      <li><a href="#">JavaScript Basic</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Tools</a>
    <ul>
      <li><a href="#">Geomatric Images</a></li>
      <li><a href="#">Color Picker</a></li>
      <li><a href="#">Password Generator</a></li>
      <li><a href="#">HTML Editor</a></li>
      <li><a href="#">Base 64</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Snnipets</a>
    <ul>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">Angular</a></li>
      <li><a href="#">Java</a></li>
    </ul>
  </li>
  <li>
    <a href="#">String Functions</a>
    <ul>
      <li><a href="#">String Reverse</a></li>
      <li><a href="#">URL Encoder</a></li>
      <li><a href="#">Empty Lines Remover</a></li>
      <li><a href="#">String Word Count</a></li>
    </ul>
  </li>
</ul>

So, the first step is ready. Let’s move on and create an attractive navigation menu!

2. Add CSS.

Now that we have half of our code, let’s add style to it. With the help of CSS properties, we can create a drop-down menu.

  • Set width, height for the menu with the width and the height properties.
  • Set z-index so as to make sure that the navigation menu will be placed at the top of other elements.
  • Also, set the color of the entire menu with the color property. You can pick colors from our Color Picker tool.
#wrap{
width: 100%; 
height: 50px; 
margin: 0;
z-index: 99; 
position: relative; 
background-color: #444444;
}
  • Set position to "absolute" so as our drop-down menus do not push other elements down.
.navbar{
height: 50px;
padding: 0;
margin: 0;
position: absolute; 
}
  • Line up our menu items horizontally across the top of the page by setting the float property to "left".
.navbar li {
height: auto;
width: 135.8px; 
float: left;  
text-align: center; 
list-style: none;  
font: normal bold 13px/1em Arial, Verdana, Helvetica;  
padding: 0;
margin: 0;
background-color: #444444;
}
  • Style the rest of our anchor tags.
.navbar a{							
padding: 18px 0;  
border-left: 1px solid #ccc9c9;
text-decoration: none; 
color: white; 
display: block;
}
  • Style menu background so as to change the color when hovered.
.navbar li:hover, a:hover {
background-color: #444444;
}
  • Add style so as to hide the drop-down menu, and another style to display it when a mouse pointer hovered over the main menu item.
.navbar li ul{
display: none;
height: auto;									
margin: 0; 
padding: 0; 
}

.navbar li:hover ul{
display: block;
}
  • Style the drop-down menu.
.navbar li ul li{
background-color: #444444;
}
  • Change the borders, so as to create the main menu’s effect.
.navbar li ul li a{
border-left: 1px solid #444444; 
border-right: 1px solid #444444; 
border-top: 1px solid #c9d4d8; 
border-bottom: 1px solid #444444; 
}

.navbar li ul li a:hover{
background-color: #a3a1a1;
}

So, let’s see what looks like our drop-down menu:

Example

<!DOCTYPE html>
<html>
  <head>
    <style>
      #wrap{
      width: 100%; 
      height: 50px; 
      margin: 0;
      z-index: 99; 
      position: relative; 
      background-color: #444444;
      }
      .navbar{
      height: 50px;
      padding: 0;
      margin: 0;
      position: absolute; 
      }
      .navbar li{
      height: auto;
      width: 135.8px; 
      float: left;  
      text-align: center; 
      list-style: none;  
      font: normal bold 13px/1em Arial, Verdana, Helvetica;  
      padding: 0;
      margin: 0;
      background-color: #444444;
      }
      .navbar a{							
      padding: 18px 0;  
      border-left: 1px solid #ccc9c9;
      text-decoration: none; 
      color: white; 
      display: block;
      }
      .navbar li:hover, a:hover {
      background-color: #444444;
      } 
      .navbar li ul{
      display: none;
      height: auto;									
      margin: 0; 
      padding: 0; 
      }				
      .navbar li:hover ul{
      display: block;
      }
      .navbar li ul li {
      background-color: #444444;
      } 
      .navbar li ul li a{
      border-left: 1px solid #444444; 
      border-right: 1px solid #444444; 
      border-top: 1px solid #c9d4d8; 
      border-bottom: 1px solid #444444; 
      }
      .navbar li ul li a:hover{
      background-color: #a3a1a1;
      }
    </style>
  </head>
  <body>
    <h2>Create Modal Box</h2>
    <div id="wrap">
      <ul class="navbar">
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">Books</a>
          <ul>
            <li><a href="#">Learn HTML</a></li>
            <li><a href="#">Learn CSS</a></li>
            <li><a href="#">Learn JavaScript</a></li>
            <li>
              <a href="#">Learn PHP</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Quizzes</a>
          <ul>
            <li><a href="#" >CSS Basic</a></li>
            <li><a href="#">PHP Basic</a></li>
            <li><a href="#">JavaScript Basic</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Tools</a>
          <ul>
            <li><a href="#">Geomatric Images</a></li>
            <li><a href="#">Color Picker</a></li>
            <li><a href="#">Password Generator</a></li>
            <li><a href="#">HTML Editor</a></li>
            <li>
              <a href="#">Base 64</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Snnipets</a>
          <ul>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">Angular</a></li>
            <li>
              <a href="#">Java</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">String Functions</a>
          <ul>
            <li><a href="#">String Reverse</a></li>
            <li><a href="#">URL Encoder</a></li>
            <li><a href="#">Empty Lines Remover</a></li>
            <li><a href="#">String Word Count</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </body>
</html>

Another example of a drop-down navigation menu:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      *{
      margin: 0;
      padding: 0;
      list-style-type: none;
      box-sizing: border-box;
      }
      body{
      background: url('https://images.unsplash.com/photo-1532210317995-cc56d90177d9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80') center;
      background-size: cover;
      min-height: 600px;
      font-family: 'Helvetica Neue', sans-serif;
      }
      nav{
      text-align: center;
      }
      .menu{
      display: inline-block;
      }
      .menu > li{
      float: left;
      color: #e298e1;
      width: 140px;
      height: 40px;
      line-height: 40px;
      background: rgba(0,0,0, 0.7);
      cursor: pointer;
      font-size: 17px;
      }
      .sub-menu{
      transform: scale(0);
      transform-origin: top center;
      transition: all 300ms ease-in-out;
      }
      .sub-menu li{
      font-size: 14px;
      background: rgba(0,0,0, 0.8);
      padding: 8px 0;
      color: white;
      border-bottom: 1px solid rgba(255,255,255, 0.2);
      transform: scale(0);
      transform-origin: top center;
      transition: all 300ms ease-in-out;
      }
      .sub-menu li:last-child{
      border-bottom: 0;
      }
      .sub-menu li:hover{
      background: black;
      }
      .menu > li:hover .sub-menu li{
      transform: scale(1);
      }
      .menu > li:hover .sub-menu{
      transform: scale(1);
      }
    </style>
  </head>
  <body>
    <nav>
      <ul class="menu">
        <li>
          Italy
          <ul class="sub-menu">
            <li>Rome</li>
            <li>Milan</li>
            <li>Venice</li>
            <li>Lacio</li>
            <li>Florence</li>
          </ul>
        </li>
        <li>
          France
          <ul class="sub-menu">
            <li>Paris</li>
            <li>Bordeau</li>
            <li>Marseille</li>
            <li>Toulouse</li>
          </ul>
        </li>
        <li>
          Spain
          <ul class="sub-menu">
            <li>Madrid</li>
            <li>Valencia</li>
            <li>Barcelona</li>
            <li>Seville</li>
            <li>Bilbao</li>
          </ul>
        </li>
        <li>
          Russia
          <ul class="sub-menu">
            <li>Moscow</li>
            <li>Saint Petersburg</li>
            <li>Tula</li>
            <li>Chekhov</li>
          </ul>
        </li>
        <li>
          Germany
          <ul class="sub-menu">
            <li>Berlin</li>
            <li>Munich</li>
            <li>Frankfurt</li>
            <li>Hamburg</li>
            <li>Dresden</li>
          </ul>
        </li>
      </ul>
    </nav>
  </body>
</html>

Do you find this helpful?

Related articles