CSS DropDowns
Last Updated :
12 Apr, 2024
Dropdowns are one of the most important parts of an interactive website. CSS is used to design the drop-down menus. A drop-down is a bunch of lists under an unordered list i.e. <ul> as it is popularly known in HTML world. Nested list (<li>) tags under the <ul> tag used to create drop-down structure. To bring out the effects use CSS for the components present in the structure. The CSS is very straightforward property used to create the drop-down menu.
html
<!DOCTYPE html>
<html>
<head>
<title>Dropdown property</title>
</head>
<body>
<nav>
<ul>
<li class="Lev-1">
<a href="">Level-1</a>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Output:
Example: Adding CSS property in HTML structure to create interactive drop-down structure.
html
<!DOCTYPE html>
<html>
<head>
<title>Navigation property</title>
<style>
a {
color: white;
background-color: #990;
text-decoration: none;
}
nav {
background: #333;
}
nav>ul {
margin: 0 auto;
width: 80px;
}
nav ul li {
display: block;
float: left;
margin-left: -40px;
position: relative;
}
nav ul a {
display: block;
float: left;
width: 150px;
padding: 10px 20px;
}
nav ul a:hover {
background: #090;
}
nav ul li ul li {
float: none;
}
nav ul li ul {
display: none;
position: absolute;
background: #333;
top: 42px;
}
nav ul li:hover>ul {
display: block;
}
nav ul li a {
display: block;
}
.gfg {
font-size: 40px;
font-weight: bold;
color: #009900;
Text-align: center;
}
p {
font-size: 20px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<p>Dropdown Navigation property</p>
<nav>
<ul>
<li class="Lev-1">
<a href="">Level-1</a>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Output:
The above-written code produces a proper output on the basis of a drop-down structure. Important parts of HTML code are discussed below:
- nav is the outermost container
- nav ul li ul li – float is set to none so that it remains intact when we hover over it.
- Use relative position so that li moves or changes its position relative to its component.
- Use ‘>’ after hover to see the effect of hover on the immediate next ul of the li.
Right-aligned Dropdown:
The right-aligned dropdown is a dropdown the float value is right to display drop-down content on the right screen. Add float right to the div which holds the content.
html
<!DOCTYPE html>
<html>
<head>
<title>right-aligned dropdown content property</title>
<style>
#drop {
background-color: teal;
color: white;
padding: 10px;
font-size: 16px;
width: : 200px;
height: : 60px;
border-radius: 5px;
font-size: 20px;
}
#drop-down {
position: relative;
display: inline-block;
}
#dropdown-menu {
display: none;
position: absolute;
background-color: #666;
width: 160px;
margin-left: -45px;
border-radius: 5px;
z-index: 1;
}
#dropdown-menu a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.gfg {
font-size: 40px;
font-weight: bold;
color: #009900;
Text-align: center;
}
p {
font-size: 20px;
font-weight: bold;
text-align: center;
}
#dropdown-menu a:hover {
background-color: #ddd;
}
#drop-down:hover #dropdown-menu {
display: block;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<p>Right-aligned Dropdown content property</p>
<div id="drop-down"
style=" float: right;
margin-right: 70px;">
<button id="drop">DropDown</button>
<div id="dropdown-menu">
<a href="">Item 1</a>
<a href="">Item 2</a>
<a href="">Item 3</a>
<a href="">Item 4</a>
</div>
</div>
</body>
</html>
Output:
Image Dropdown:
It is not a dropdown but enlarges the image on which you hover. Needs basic CSS and an image to make it work.
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>Image Dropdown</title>
<style>
.dropmenu {
position: relative;
display: inline-block;
margin-left: 150px;
}
.sub-dropmenu {
display: none;
position: absolute;
}
.dropmenu:hover .sub-dropmenu {
display: block;
}
.enlarge {
padding: 15px;
text-align: center;
}
.gfg {
margin-left: 40px;
font-size: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="gfg">Image Dropdown property</div>
<div class="dropmenu">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/temp1.png"
width="150"
height="50" align="middle">
<div class="sub-dropmenu">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/temp1.png"
width="600"
height="200">
</div>
</div>
</body>
</html>
Output:
Clicked Drop-downs:
This requires a basic understanding of JavaScript as it is used to run some functions to make the clicked drop-down work.
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>clicked dropdown</title>
<style type="text/css">
button {
background: #009900;
width: 200px;
height: 60px;
color: white;
border: 1px solid #fff;
font-size: 20px;
border-radius: 5px;
}
ul li {
list-style: none;
}
ul li a {
display: block;
background: #c99;
width: 200px;
height: 50px;
text-decoration: none;
text-align: center;
padding: 10px;
border-radius: 5px;
text-align: center;
color: white;
font-size: 25px;
}
ul li a {
text-decoration: none;
}
ul li a:hover {
background: #009900;
}
.open {
display: none;
}
.gfg {
font-size: 40px;
font-weight: bold;
color: #009900;
Text-align: center;
}
p {
font-size: 20px;
font-weight: bold;
text-align: center;
}
</style>
<script type="text/javascript">
function open_menu() {
let clicked = document.getElementById('drop-menu');
if (clicked.style.display == 'block') {
clicked.style.display = 'none';
}
else {
clicked.style.display = 'block';
}
}
</script>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<p>Clicked Dropdown content property</p>
<div id="dropdown">
<button onclick="open_menu()">Click Me!</button>
<div class="open" id="drop-menu">
<ul>
<li><a href="">Item-1</a></li>
<li><a href="">Item-2</a></li>
<li><a href="">Item-3</a></li>
<li><a href="">Item-4</a></li>
</ul>
</div>
</div>
</body>
</html>
Output:
Note: Some important highlights of the code:
- The javascript function will expand and collapse the menu when the button “Click Me” is clicked.
- We use onclick to call the javascript function in the button tag.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...