Simple Dropdown Menu Using HTML and CSS

Simple Dropdown Menu Using HTML and CSS

In this tutorial we will see how to create Simple Dropdown Menu Using HTML and CSS. CSS position property and :hover selector is used for this purpose.

HTML Code

Simple HTML Code is given below, In this code we have a main ul tag which has four list items, while the second list item contain another ul tag which has four more list items.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple Dropdown Menu Using HTML and CSS</title>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li>
<a href="#">Languages ▾</a>
<ul class="dropdown">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</body>
</html>

CSS Code

CSS code is given below, In this code CSS position property is used, with the values relative and absolute. CSS :hover selector is also used to change the background-color of anchor tags and display properties of inner ul tag.


* {
padding: 0;
margin: 0;
font-family: monospace;
}
ul {
list-style: none;
background: #22438C;
}
ul li {
display: inline-block;
position: relative;
}
ul li a {
display: block;
padding: 20px 25px;
color: #FFF;
text-decoration: none;
text-align: center;
font-size: 20px;
}
ul li ul.dropdown li {
display: block;
}
ul li ul.dropdown {
width: 100%;
background: #22438C;
position: absolute;
z-index: 999;
display: none;
}
ul li a:hover {
background: #112C66;
}
ul li:hover ul.dropdown {
display: block;
}

Demo

Video Tutorial

Watch video tutorial on Simple Dropdown Menu Using HTML and CSS.

Post a Comment

Previous Post Next Post