CSS Dropdown
How to create a pure CSS dropdown menu?
The dropdown is the hidden text we have to use CSS display block for the showing drop content as like CSS tooltip. When we go to any element and then move the mouse over or mouse click then show the hidden text of the dropdown content. Maximum time we use dropdown for the navigation has a lot of categories then its required. The main concept of the dropdown depends on the CSS position & CSS Display property. We can create dropdown menu simply as given example below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Dropdown</title>
<style>
* {
margin: 0;
padding: 0;
}
.anythingDropDown {
margin: 50px auto;
max-width: 600px;
}
.anythingDropDown ul {
list-style: none;
}
.anythingDropDown li {
float: left;
}
.anythingDropDown li.dropdown {
position: relative;
}
.anythingDropDown li.dropdown:hover .dropDownContainer {
display: block;
}
.anythingDropDown li.dropdown:hover>a {
background: #0b6;
}
.anythingDropDown li .dropDownContainer {
position: absolute;
top: 100%;
display: none;
}
.anythingDropDown ul li>a {
display: block;
padding: 5px 10px;
color: #fff;
background: #0bf;
border-radius: 3px;
text-decoration: none;
margin-right: 5px;
font-family: Arial, Helvetica, sans-serif;
}
.anythingDropDown ul li a:hover {
background: #0b6;
border-radius: 3px;
}
.dropDownContainer ul li {
display: block;
width: 100%;
}
.dropDownContainer ul li>a {
display: block;
padding: 5px 10px;
color: #333;
background: #eee;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
border-bottom: 1px solid #ddd;
border-radius: 0;
width: 100%;
}
.dropDownContainer ul li a:hover {
background: #0b6;
border-radius: 3px;
color: #fff;
border-radius: 0;
}
</style>
</head>
<body>
<div class="anythingDropDown">
<ul>
<li><a href="#">CSS</a></li>
<li> <a href="#">HTML </a></li>
<li class="dropdown"><a href="#">JavaScript</a>
<div class="dropDownContainer">
<ul>
<li><a href="#">AngularJS</a></li>
<li><a href="#">Angular</a></li>
<li><a href="#">Jquery</a></li>
</ul>
</div>
</li>
<li><a href="#">PHP</a></li>
</ul>
</div>
</body>
</html>
For modification click in this URL: https://embed.plnkr.co/C0Bt21AOJTlgI7oiZzBx/
No comments:
Note: Only a member of this blog may post a comment.