CSS Dropdown Menu

Written By: Avinash Malhotra

  1. Home
  2. Frontend
  3. CSS
  4. Dropdown Menu

Dropdown Menu

Lets create a simple dropdown menu using html and css. We will hover to open dropdown menu.

I am using CSS :hover to open dropdown menu. css hover works on pointer based devices only, not touch based. To make it touch compatible, add javascript:void(0) in dropdown menu hyperlinks.



<style>
*{ margin:0; box-sizing:border-box}
a{ text-decoration:none}
ul{list-style:none;padding:0}
.container{max-width:1200px; margin:auto;}
nav{ background: #222; padding: 5px;}
nav ul{  margin: 0; }
nav > ul{ display: flex;  }
nav > ul> li{ margin-right: 10px; }
nav a{display: block; padding: 6px 12px; color: #fff;}
nav li:hover > a{ background: #666;}
nav a.drop::before{
	content: '';
	display: inline-block;
	border: 5px solid;
	border-color: #fff transparent transparent;
	margin: -3px 3px;
}
nav .dropdown{ display: none; position: absolute; background: #222;}
nav li:hover .dropdown{ display: block;}

</style>

<div class="container">
	<nav class="navtop">
		<ul>
			<li><a href="">Home</a></li>
			<li><a href="">About</a></li>
			<li><a class="drop" href="javascript:void(0)">Blogs</a>
				<div class="dropdown">
					<ul>
						<li><a href="">Technical</a></li>
						<li><a href="">Science</a></li>
						<li><a href="">Fiction</a></li>
					</ul>
				</div>
			</li>
			<li><a class="drop" href="javascript:void(0)">Courses</a>
				<div class="dropdown">
					<ul>
						<li><a href="">Full Stack</a></li>
						<li><a href="">Frontend</a></li>
						<li><a href="">MERN Stack</a></li>
						<li><a href="">MEAN Stack</a></li>
						<li><a href="">React</a></li>
						<li><a href="">Angular</a></li>
						<li><a href="">Node JS</a></li>
					</ul>
				</div>
			</li>
			<li><a href="">Contact us</a></li>
		</ul>	
	</nav>	
</div>

Nested Dropdown

CSS DropDown Menu, is a navigation menu with sub-menus used to show nested elements in a menu on hover. Simple Drop Down Menus are build using HTML & CSS. Here we'll learn how to create a simple Navigation menu using html and CSS only.

How to create a simple dropdown menu using html and CSS

Here is the step by step guide to create css dropdown menu.


<style>
*{ 
    margin:0; 
	box-sizing:border-box;
}
ul{ 
    list-style:none;
    padding:0;
}
a{ 
    text-decoration:none
}

.container{ 
    max-width:1200px; 
    margin:auto;
}
.navtop{ 
    background:#333; 
    color:#fff
}
.navtop > ul{  
     position:relative; 
     z-index:1;
	 display:flex;
}
.navtop > ul > li{ 
    border-left:1px solid #fff;
}
.navtop ul li a{ 
    display:block; 
    padding:10px 20px; 
    color:#ccc;
	white-space:nowrap;
}
.navtop ul li:hover > a{ 
    background:#f00; 
    color:#fff;
}
.navtop ul li:first-child{ 
    border:none;
}
.navtop > ul > li:hover > ul{ 
    display:block
}
.navtop > ul > li > ul > li:hover ul{ 
    display:block
}
.navtop > ul > li > ul li{ 
    position:relative;
}
.navtop > ul > li > ul{ 
    display:none; 
    position:absolute; 
    background:#333; 
}
.navtop > ul > li > ul > li > ul{ 
    display:none; 
    position:absolute; 
    left:100%; 
    top:1px; 
    background:#333
}
.navtop ul ul li{ 
    border-top:1px solid #fff;
}
</style>

<div class="container">
	<nav class="navtop">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a>
				<ul>
					<li><a href="#">Why We</a></li>
					<li><a href="#">About Us</a></li>
					<li><a href="#">History</a></li>
				</ul>
			</li>
			<li><a href="#">Career</a></li>
			<li><a href="#"><b class="caret"></b>Training</a>
				<ul>
					<li><a href="#">Asp.net</a>
						<ul>
							<li><a href="#">Core Asp.net</a></li>
							<li><a href="#">Adv .Net</a></li>
							<li><a href="#">MVC</a></li>
						</ul>
					</li>
					<li><a href="#">Web Designing</a>
						<ul>
							<li><a href="#">HTML</a></li>
							<li><a href="#">CSS</a></li>
							<li><a href="#">Photoshop</a></li>
						</ul>				
					</li>
					<li><a href="#">Java</a>
							<ul>
								<li><a href="#">Core Java</a></li>
								<li><a href="#">Adv Java</a></li>
							</ul>
					</li>
					<li><a href="#">Php</a>
                           <ul>
                            <li><a href="#">Core Phpp</a></li>
								<li><a href="#">My Sql</a></li>
								<li><a href="#">Wordpress</a></li>
								<li><a href="#">Joomla</a></li>
                            </ul>
					</li>
				</ul>
			</li>
			<li ><a href="#">Contact</a></li>
		</ul>
	</nav>                                      
</div>

CSS Dropdown using css hover is not recommended as most of the users are using Touch Based Devices, and hover doesn't work on Touch based devices. Use JavaScript or JQuery Click to open an close dropdown menu.