Dropdown Menu CSS

There is no fixed rule for creating a dropdown menu. It depends on your creativity and requirement.

We strictly advise you to try changing these examples and see the difference by yourself.

Horizontal Dropdown

To create a horizontal dropdown menu, follow these steps-

Code list-style: none for the Unordered list
You should code float: left for the list items
Wrap the inner unordered list under the main list item like –

<li>
  <a href="#">Fruits</a>
  <ul>
    <li><a href="#">Apple</a></li>
    <li><a href="#">Mango</a></li>
    <li><a href="#">Papaya</a></li>
    <li><a href="#">Pinea</a></li>
  </ul>
</li>

By default, the items under the menu should be hidden. Use the display: none on the inner unordered list which is present under the list item like below –

li ul {
  display: none;
}

You should also use float: none in such a way that all the items should come below each other in the same order they are defined. The code can be like this –

li:hover li {
  float: none; 
}

Example of Horizontal Dropdown

ul {
 list-style: none; 
 padding:0;
  margin:0;
}

ul li {
 display: block;
 float: left; 
}

li ul {
 display: none;
}

ul li a {
 display: block;
 font-family:helvetica;
 font-size:20px;
 background-color:deepskyblue;
 padding: 10px;
 text-decoration: none;
 color: black;
 width:100px; 
 border: 2px solid black;
 border-radius:5%;
}

ul li a:hover {
  background:deepskyblue;
 color:white;
}

li:hover ul {
 display: block; 
 position: absolute; 
}

li:hover li {
 float: none; 
}

li:hover a {
 background-color:pink; 
 color:black;
}

li:hover li a:hover {
 width:100px;
}

Vertical Dropdown

The idea of creating vertical dropdown is similar to the horizontal dropdown.

The code below is self-explanatory.

The best way to master the dropdown is to change our example and spot the difference.

Example of Vertical Dropdown

* {
 padding:0;
 margin:0;
}
 
div.dropdown-vertically {
 position:relative;
 width:200px;
}

div.dropdown-vertically ul {
 list-style: none;
 background-color:lightgreen;
 font-size:20px;
}

div.dropdown-vertically li {
 position:relative;
 border:2px solid black;
}

div.dropdown-vertically a { 
 display:block;
 text-decoration:none;
 padding:10px;
 color:black;
}

div.dropdown-vertically li:hover > a {
 background:black;
 color:lightgreen;
}

div.dropdown-vertically ul ul {
 position:absolute;
 top:0;
 width:100%;
 visibility:hidden;
}

div.dropdown-vertically li:hover > ul {
 left:100%;
 visibility:visible;
}

In the above example, if we remove the position: relative from –

div.dropdown-vertically li {
  position:relative;
  border:2px solid black;
}

to –

div.dropdown-vertically li {
  border:2px solid black;
}

Then, the result would be very different. See the output below –

Example of Vertical Dropdown after doing minor change-

* {
 padding:0;
 margin:0;
}
 
div.dropdown-vertically {
 position:relative;
 width:200px;
}

div.dropdown-vertically ul {
 list-style: none;
 background-color:lightgreen;
 font-size:20px;
}

div.dropdown-vertically li {
 border:2px solid black;
}

div.dropdown-vertically a { 
 display:block;
 text-decoration:none;
 padding:10px;
 color:black;
}

div.dropdown-vertically li:hover > a {
 background:black;
 color:lightgreen;
}

div.dropdown-vertically ul ul {
 position:absolute;
 top:0;
 width:100%;
 visibility:hidden;
}

div.dropdown-vertically li:hover > ul {
 left:100%;
 visibility:visible;
}

Another Example of Dropdown Navigation Menu

Let’s do some small changes and create a different type of dropdown Navigation menu

Example

body {
 background:black;
}

 ul {
  list-style: none; 
  padding:0;
   margin:0;
 }

 ul li {
  display: block;
  float: left;
  border-right:1px solid yellow;
 }

 li ul {
  display: none;
 }

 ul li a {
 display: block;
  font-family:helvetica;
  font-size:20px;
  padding: 10px;
  text-decoration: none;
  color: gold;
 }

 ul li a:hover {
  background:black;
  opacity:0.3;
  color:white;
 }

 li:hover ul {
  display: block; 
  position: absolute;
 }

 li:hover li {
  float: none; 
 }

 li:hover a {
  background-color:gold; 
  opacity:0.4;
  color:black;
 }

Now, we are showing you another example of a dropdown menu in order to provide you maximum ways to create the dropdown menu.

Here, we will create a contrasting color of the menu items on hover.

Change it for yourself and analyze the output.

Example-

*{
 padding:0;
 margin:0;
 box-sizing:border-box;
}

nav {
 display:block;
 margin:0 auto;
 text-align:center;
 height:100px;
 width:100%;
}

nav a {
 display:block;
 text-decoration:none;
 color:white;
}

nav a:hover {
 color:white;
 background:hotpink;
}
 
ul {
 list-style-type:none;
} 

 ul li {
 float:left;
 width:150px;
 height:50px;
 line-height:50px;
 background:black;
}

ul ul li {
 position:relative;
 display:none;
}

ul li:hover ul li {
 display:block;
}

ul ul ul {
 display:none;
}

ul ul li:hover ul {
 display:block;
 position:absolute;
 width:150px;
 height:50px;
 left:150px;
 top:0;
}

Dropdown on Select

Suppose, you need to show the list of options from the dropdown only when you click on the dropdown menu, then you can use the <select> tag with <option> tag.

You can style the <select> tag with other style properties like background-color, padding, margin, etc.

Basically, it gives a list of options from the dropdown on select.

Example of Dropdown on select

<select>
      <option value="Mobiles">Mobiles</option>
      <option value="SONY">SONY</option>
      <option value="APPLE">APPLE</option>
      <option value="HTC">HTC</option>
      <option value="NOKIA">NOKIA</option>
      <option value="SAMSUNG">SAMSUNG</option>
      <option value="MOTOROLA">MOTOROLA</option>
</select>

Image Dropdown

Now, instead of text in the menu, we are going to use an image to create an image dropdown as below-

Example of Image Dropdown

<ul>
  <li>
    <a href="#"><img src="image_path1"><br>Birds</a>
    <ul>
      <li><a href="#"><img src="image_path11"><br>Bird 1</a></li>
      <li><a href="#"><img src="image_path12"><br>Bird 2</a></li>
      <li><a href="#"><img src="image_path13"><br>Bird 3</a></li>
      <li><a href="#"><img src="image_path14"><br>Bird 4</a></li>
    </ul>
  </li>
</ul>

Multilevel Dropdown Menu

Now, let us create multilevel dropdown Menu i.e. sub-menus under a menu.

This is one of the most important examples which you should master.

Example of Multilevel Dropdown Menu

*{
 padding:0;
 margin:0;
 box-sizing:border-box;
}

nav {
 display:block;
 margin:0 auto;
 text-align:center;
 height:100px;
 width:100%;
}

nav a {
 display:block;
 text-decoration:none;
 color:white;
}

nav a:hover {
 color:white;
 background:hotpink;
}
 
ul {
 list-style-type:none;
} 

 ul li {
 float:left;
 width:150px;
 height:50px;
 line-height:50px;
 background:black;
}

ul ul li {
 position:relative;
 display:none;
}

ul li:hover ul li {
 display:block;
}

ul ul ul {
 display:none;
}

ul ul li:hover ul {
 display:block;
 position:absolute;
 width:150px;
 height:50px;
 left:150px;
 top:0;
}

Drop Down Hover

We are going to show a simple drop down hover effect for the @keyframes property of animation along with the <nav> tag.

Example of Drop Down Hover

* {
 padding:0;
 margin:0;
 box-sizing:border-box;
}

nav {
 display:block;
 margin:0 auto;
 text-align:center;
 height:100px;
 width:100%;
}

nav a {
 display:block;
 text-decoration:none;
 color:white;
}

nav a:hover {
 border-radius:25%;
 color:white;
 background:skyblue;
 background:linear-gradient(to top left, aqua, hotpink);
 animation: dropdownmenu 300ms;
}

@keyframes dropdownmenu {
  from {
    opacity:0;
    top:3px;
  }
  to {
    opacity:1;
    top:3px;
  }
}

ul {
 list-style-type:none;
} 

ul li {
 float:left;
 width:150px;
 height:50px;
 line-height:50px;
 background:black;
 border-right:2px solid skyblue;
}

ul ul li {
 position:relative;
 display:none;
 border:2px solid skyblue;
}

ul li:hover ul li {
 display:block;
}

ul ul ul {
 display:none;
}

ul ul li:hover ul {
 display:block;
 position:absolute;
 width:150px;
 height:50px;
 left:150px;
 top:0;
 border:2px solid hotpink;
}

Drop Down With Arrow

In the modern age, we see many websites which use arrows to give a clue to the user that this is a dropdown and it contains menu items.

To create the arrow, you can use Icons like Font Awesome Icons, Google Icons, Bootstrap Icons.

The alternative solution is to use HTML entity for Arrows. Here we are using the HTML5 entity (▼) for vertical downward arrow and (►) for the horizontal left to right arrow.

Example of Drop Down With Arrow

* {
 padding:0;
 margin:0;
 box-sizing:border-box;
}

nav {
 display:block;
 margin:0 auto;
 text-align:center;
 height:100px;
 width:100%;
}

nav a {
 display:block;
 text-decoration:none;
 color:white;
}

nav a:hover {
 color:white;
 background:hotpink;
}
 
ul {
 list-style-type:none;
} 

 ul li {
 float:left;
 width:150px;
 height:50px;
 line-height:50px;
 background:black;
}

ul ul li {
 position:relative;
 display:none;
}

ul li:hover ul li {
 display:block;
}

ul ul ul {
 display:none;
}

ul ul li:hover ul {
 display:block;
 position:absolute;
 width:150px;
 height:50px;
 left:150px;
 top:0;
}

Vertical Drop Down With Sub Menu

Sometimes, you want to create a sub-menu under a menu in a vertical dropdown menu.

Let us see how we can create it –

Example of Vertical Drop Down With Sub Menu

*{
 padding:0;
 margin:0;
}
 
div.dropdown-submenu{
 position:relative;
 width:200px;
}

div.dropdown-submenu ul{
 list-style: none;
 background-color:deepskyblue;
 font-size:20px;
}

div.dropdown-submenu li{
 position:relative;
 border:2px solid black;
}

div.dropdown-submenu a{
 display:block;
 text-decoration:none;
 padding:10px;
 color:black;
}

div.dropdown-submenu li:hover > a{
 background:black;
 color:deepskyblue;
}

div.dropdown-submenu ul ul{
 position:absolute;
 top:0;
 width:100%;
 visibility:hidden;
}

div.dropdown-submenu li:hover > ul{
 left:100%;
 visibility:visible;
}

Example of Dropdown Menu combining multiple properties

Based on our learning so far, we are going to create a dropdown which combines various properties like display, text-align, box-shadow, linear-gradients, animation, etc.

Example of Drop Down Menu

* {
 padding:0;
 margin:0;
 box-sizing:border-box;
}

div {
 display:block;
 margin:0 auto;
 text-align:center;
 height:100px;
 width:100%;
}

div a {
 font-size: 23px;/* css dropdown font-size */
 display:block;
 text-decoration:none;
 color:white;
 box-shadow: 0px 4px 12px 3px rgba(0,0,0,0.8);

}

div a:hover {
 color:black;
 background: linear-gradient(to left, lavender 60%, hotpink 40%);/*css dropdown shadow*/
 background-size:50px;
 animation: dropdownmenu 1s; /* css dropdown delay */
}

@keyframes dropdownmenu {
  from {
    opacity:0;
    top:5px;
  }
  to {
    opacity:1;
    top:7px;
  }
}
 
ul {
 list-style-type:none;
} 

ul li {
 float:left;
 width:150px;
 height:50px;
 line-height:50px;
 background:hotpink;/*dropdown background color */
}

ul ul li {
 position:relative;
 display:none;
}

ul li:hover ul li {
 display:block; 
}

ul ul ul {
 display:none;
}

ul ul li:hover ul {
 display:block;
 position:absolute;
 width:150px;
 height:50px;
 left:150px;
 top:0;
}