Pure CSS Horizontal Dropdown Menu

Pure CSS Horizontal Dropdown Menu
Code Snippet:DropDownMenu
Author: Aaron Botello
Published: January 17, 2024
Last Updated: January 22, 2024
Downloads: 8,281
License: MIT
Edit Code online: View on CodePen
Read More

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

How to Make Pure CSS Horizontal Dropdown Menu

1. First of all create a markup structure for the 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;
}

1 thought on “Pure CSS Horizontal Dropdown Menu”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...