how to create dropdown menu in HTML and CSS

Dropdown menu can be done in CSS without using JavasSript script. Just add a few lines to the CSS file and you’re done. Despite the simplicity, the menu will be quite versatile. Styles fit an arbitrary number nested menu. The code remains the same. 

The article describes three types of menus, but if you are just starting to understand the layout, I advise you to read it first. This will make it easier to understand.

First, let’s make the HTML markup for the menu. To create a nav menu in HTML, we will make the menu a list.

<ul class="navbar">
  <li><a href="https://ssiddique.info">Developer Resources</a></li>
    <li><a href="#">Categories</a>
    <ul>
      <li><a href="#">Category 1</a></li>
      <li><a href="#">Category 2</a></li>
    </ul>
  </li>
  <li><a href="#">Tags</a>
    <ul>
      <li><a href="#">Tag 1</a></li>
      <li><a href="#">Tag 2</a>
        <ul>
          <li><a href="#">Tag 2.1</a></li>
          <li><a href="#">Tag 2.2</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="https://ssiddique.info/dropdown-menu-css.html">Explanation</a></li>
</ul>
dropdown menu using list
Should look something like this

Now the HTML part is done, if you want to add more levels / nested menu, now is the good time to add it to the code. We will not touch the HTML file anymore. All further changes are made in CSS. The first thing we need to do is hide the nested items. To hide the menu we will use display: none. To remove the markers use list-style: none

ul.navbar li ul {display: none;}
ul.nav li {list-style: none;}

Use : hover to make nested items appear when you hover over a parent item. We need to make sure that only items of the first nesting level appear. For this we use >

ul.navbar li:hover > ul {display: block;}

This line contains all the magic of our drop-down menu, so let’s break it down in more detail. Thanks to the: hover pseudo-class, when you hover over a menu item, for the first nested ul list, the display value will become block. This opens the first nesting level. If at this level there are items containing sub-items, and when you hover over them, only one nested level will open.

With the basic mechanics sorted out. It remains to redefine the place where the nested items will appear. To do this, we will use the position: absolute property. With this positioning, coordinates are counted from the edge of the browser window, unless the position property is set for the parent element with the value fixed, relative, or absolute. In this case, the countdown is from the edge of the parent element.

Also read:

CSS Vertical Dropdown menu (demo)

Using the position property we will move the nested items to the right by a distance equal to the width of the menu. There is one limitation in the considered method. While positioning, we have to hard-code the width. On the other hand, the vertical menu is placed in a sidebar with predefined width, so snapping to the width should not cause problems.

/*Horizontal Dropdown menu*/

body{
  background: #e06377;
}

/* Menu Blcok*/
ul{
  margin: 0;
  padding: 0;
}
ul.navbar li {
  background: #f9d5e5;
  border-right: 1px solid #FFFFFF;
  float: left; /*Horizontal Meny*/
  height: 30px;
  list-style: none;
}
ul.navbar li a {
  text-decoration: none;
  display: block;
  padding: 5px 5px 5px 15px;
}
ul.navbar li ul {
  display: none;	/*Hide nested item*/
}
ul.navbar { /*set the height and width of the item*/
  background: #f9d5e5;
  height: 30px;
  width: 600px;
}

/*Drop down menu*/

ul.navbar li:hover {
  background: #eeac99;
  position: relative;
}
ul.navbar li:hover > ul {
  border-top: 1px solid white;
  display: block;
  position: absolute;
  top: 30px; /*Menu level expands downward*/
  left: 0;
}
/*Nested menu*/
ul.navbar li ul li{
  border-bottom: 1px solid white;
  height: auto;
  width: 150px;
}
ul.navbar li:hover ul li ul{
  position: absolute;
  top: 0;
  left: 150px; /*Nested menu expands on right side*/
}

CSS Horizontal Dropdown Menu (demo)

For the horizontal menu, we will also apply positioning, but there are several nuances. To make the menu horizontal use the float property. The menu will expand, so you have to account for height while positioning. First, let’s make a menu with one nesting level. The submenu will also be horizontal. To do this, we position the nested menu relative to the list and not the to the parent item and set its width.

body{
  background: #e06377;
}

/* Menu block*/

ul{
  margin: 0;
  padding: 0;
}
ul.navbar li {
  background: #f9d5e5;
  border-right: 1px solid #FFFFFF;
  float: left; /*Horizontal menu*/
  height: 30px;
  list-style: none;
}
ul.navbar li a {
  text-decoration: none;
  display: block;
  padding: 5px 5px 5px 15px;
}
ul.navbar li ul {
  display: none;	/*Hide nested items*/
}
ul.navbar li:hover {
  background: #eeac99;
}
/*Dropdown menu*/
ul.navbar {
  position: relative;
  background: #f9d5e5;
  height: 30px;
  width: 600px;
}
ul.navbar li:hover > ul {
  background: #eeac99;
  border-top: 1px solid white;
  display: block;
  width: 600px;
  position: absolute;
  top: 30px;
  left: 0;
}

Scroll to Top