{ A destination to learn coding }

How to make a dropdown menu using hover

Learn how to create a drop-down menu

Html Script


<nav>
<ul>
	<a href="#"><li>Menu</li></a>
	<a href="#"><li>Learn</li></a>
	
	<div class="hoveref">
	About
	<ul class="drpdwn" >
	<a href="#"><li>About Us</li></a>
	<a href="#"><li>Vision</li></a>
	<a href="#"><li>Blog</li></a>
	</ul>
	</div>
</ul>
</nav>
CSS code

a{
color:white;
text-decoration:none;
}

	
nav ul{
	width:390px;
	height:60px;
	line-height:60px;
	font-size:25px;
	background-color:#ffc415;
	color:white;
	margin:0px;
	padding:0px;
	}

nav ul li{
	width:130px;
	height:inherit;
	margin:0px;
	display:inline-block;
	float:left;
	text-align:center;	
	}
	
div.hoveref{
	width:130px;
	height:auto;
	display:inline-block;
	cursor:pointer;
	text-align:center;
	}
	
ul.drpdwn
	{width:130px;
	display:none;
	position:relative;
	z-index:2;}	

ul.drpdwn li
	{
	height:60px;
	background-color:#ece3e8;
	color:black;
	border-bottom:1px solid white;
	}

nav ul li:hover, div.hoveref:hover
	{color:black;
	background-color:white;
	}
	
div.hoveref:hover ul.drpdwn
	{display:block;}