Pure CSS Horizontal Dropdown Menu

Yet another ultra lightweight (less than 1KB), dependency-free pure CSS horizontal dropdown menu for non-JavaScript web projects. This menu also supports multilevel (nested ul li) dropdown. You can easily integrate it as it doesn’t require any external library.

The dropdown menu is a fully customizable with additional CSS.

Plugin Overview

Plugin: DropDownMenu
Author: Aaron Botello
Licence: MIT Licence
Published: September 16, 2019
Repository: Fork on GitHub
Dependencies: No Dependency
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 3.82 KB

How to Make Pure CSS Horizontal Dropdown Menu

1. First of all create markup structure for dropdown menu as follows:

<div class="wrapper">
   <div class="navigationDesktop">
      <nav>
         <ul>
            <li>
               <a href="#">Programming</a>
               <ul>
                  <li><a href="#">C++</a></li>
                  <li><a href="#">C#</a></li>
                  <li><a href="#">Java</a></li>
                  <li>
                     <a href="#">Web Development</a>
                     <ul>
                        <li><a href="#">Javascript</a></li>
                        <li><a href="#">PHP</a></li>
                        <li><a href="#">Ruby</a></li>
                     </ul>
                  </li>
                  <li><a href="#">Python</a></li>
               </ul>
            </li>
            <li>
               <a href="#">OS</a>
               <ul>
                  <li><a href="#">Windows</a></li>
                  <li><a href="#">Macintosh</a></li>
                  <li><a href="#">Linux</a></li>
               </ul>
            </li>
            <li>
               <a href="#">Projects</a>
               <ul>
                  <li><a href="#">Android</a></li>
                  <li><a href="#">iOS</a></li>
                  <li><a href="#">Web</a></li>
                  <li><a href="#">Windows</a></li>
               </ul>
            </li>
            <li><a href="about.html">About</a></li>
         </ul>
      </nav>
   </div>
</div>

2. Now, style your horizontal dropdown menu with CSS. You can add menu CSS file into your HTML document after downloading this menu.

<!-- Dropdown Menu CSS -->
<link rel="stylesheet" href="css/dropdown-menu.css" type="text/css">

3. If you want to use inline styles, use the following CSS.

.wrapper {
	min-height: calc(100vh - 70px);
	width: 100%;
	position: relative;
}

.navigationDesktop {
	background: #fc575e;
}

nav {
	height: 40px;
	width: 560px;
	margin: 0 auto;
	text-align: center;
	text-transform: uppercase;
}

nav a {
	display: block;
	text-decoration: none;
	font-family: monospace;
	font-weight: bold;
	font-size: 13pt;
	color: #112233;
}

nav a:hover {
	background: #223433;
	color: #f0f1f5;
}

nav ul {
	list-style: none;
}

nav ul li {
	float: left;
	width: 140px;
	height: 40px;
	line-height: 40px;
	background: #fc575e;
}

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

nav ul ul ul {
	display: none;
}

nav ul li:hover ul li {
	display: block;
	animation: navmenu 500ms forwards;
}

@keyframes navmenu {
	0% {
		opacity: 0;
		top: 5px;
	}
	100% {
		opacity: 1;
		top: 0px;
	}
}

nav ul ul li:hover ul {
	display: block;
	position: absolute;
	width: 140px;
	left: 140px;
	top: 0px;
}