How to create a drop-down navigation menu with CSS

A unique and attractive navigation menu is important for every website. Navigation menus are critical for the superb accessibility of your website. Users like well-designed websites.

We’re going to show the CSS/HTML based menu tutorial allowing us to create a drop-down navigation menu easily, and it offers 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.

Create HTML

  • Create a <div> element with an id "wrap".
  • Use a <ul> tag in your <div> element with a class of "navbar". 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="#">Git</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>

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

Add CSS

  • Set the width and height of the "wrap" 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. Add margin and position properties.
  • Set the color of the entire menu with the color property. You can pick colors from our Color Picker tool.
  • Set the position to "absolute" so as our drop-down menus won't push other elements down.
  • Line up the menu items horizontally across the top of the page by setting the float property to "left".
  • Style the rest of anchor tags.
  • Style the menu background so as to change the color when hovered.
  • Add style so as to hide the drop-down menu, and another style to display it when a mouse pointer is hovered over the main menu item.
  • Style the drop-down menu.
  • Change the borders to create the main menu’s effect.
#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;
}

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

Example of creating a drop-down navigation menu:

<!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: 135px;
        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>Example of creating a drop-down navigation menu</h2>
    <div id="wrap">
      <ul class="navbar">
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">Books</a>
          <ul>
            <li>
              <a href="https://www.w3docs.com/learn-html.html">Learn HTML</a>
            </li>
            <li>
              <a href="https://www.w3docs.com/learn-css.html">Learn CSS</a>
            </li>
            <li>
              <a href="https://www.w3docs.com/learn-javascript.html">Learn JavaScript</a>
            </li>
            <li>
              <a href="https://www.w3docs.com/learn-php.html">Learn PHP</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Quizzes</a>
          <ul>
            <li>
              <a href="https://www.w3docs.com/quiz-start/css-basic">CSS Basic</a>
            </li>
            <li>
              <a href="https://www.w3docs.com/quiz-start/php-basic">PHP Basic</a>
            </li>
            <li>
              <a href="https://www.w3docs.com/quiz-start/javascript-basic">JavaScript Basic</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Tools</a>
          <ul>
            <li>
              <a href="https://www.w3docs.com/tools/html-geometric-images/">Geomatric Images</a>
            </li>
            <li>
              <a href="https://www.w3docs.com/tools/color-picker">Color Picker</a>
            </li>
            <li>
              <a href="https://www.w3docs.com/tools/password-generator">Password Generator</a>
            </li>
            <li>
              <a href="https://www.w3docs.com/tools/editor">HTML Editor</a>
            </li>
            <li>
              <a href="https://www.w3docs.com/tools/image-base64">Base 64</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Snnipets</a>
          <ul>
            <li>
              <a href="https://www.w3docs.com/snippets/css.html">CSS</a>
            </li>
            <li>
              <a href="https://www.w3docs.com/snippets/javascript.html">JavaScript</a>
            </li>
            <li>
              <a href="https://www.w3docs.com/snippets/angularjs.html">Angular</a>
            </li>
            <li>
              <a href="https://www.w3docs.com/snippets/git.html">Git</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">String Functions</a>
          <ul>
            <li>
              <a href="https://www.w3docs.com/tools/string-revers">String Reverse</a>
            </li>
            <li>
              <a href="https://www.w3docs.com/tools/string-url-encoder">URL Encoder</a>
            </li>
            <li>
              <a href="https://www.w3docs.com/tools/string-remove-empty-lines">Empty Lines Remover</a>
            </li>
            <li>
              <a href="https://www.w3docs.com/tools/string-word-count">String Word Count</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </body>
</html>

Example of creating a drop-down navigation menu with animation:

<!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