CSS DropDowns
Dropdowns are a crucial component of interactive websites, allowing users to access multiple links from a single menu. Using CSS, you can design stylish and functional drop-down menus. In HTML, a dropdown typically consists of a nested list within an unordered list (<ul>), utilizing list (<li>) tags to create the dropdown structure. CSS properties bring these elements to life, making the dropdown interactive and visually appealing.
Introduction
Dropdown menus enhance the user experience by organizing navigation links into a compact and accessible format. CSS allows for the creation of these menus with various effects and styles. Below are examples and explanations of different types of dropdowns and how to implement them using CSS.
<!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.
<!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">w3wiki</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.
1. Right-aligned Dropdown:
The right-aligned dropdown positions the dropdown menu content to the right of the screen by setting the float property to right.
Example: Right-Aligned Dropdown
<!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">w3wiki</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:
2. Image Dropdown:
An image dropdown enlarges the image when hovered over, providing a zoom effect. This requires basic CSS to control the display and hover state.
Example: Image Dropdown
<!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.w3wiki.net/wp-content/uploads/temp1.png"
width="150"
height="50" align="middle">
<div class="sub-dropmenu">
<img src=
"https://media.w3wiki.net/wp-content/uploads/temp1.png"
width="600"
height="200">
</div>
</div>
</body>
</html>
Output:
3. Clicked Dropdowns:
Clicked dropdowns require JavaScript to toggle the dropdown content visibility when the button is clicked.
Example: Clicked Dropdown
<!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">w3wiki</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:
4. Interactive Dropdown:
To create an interactive dropdown, apply CSS styles to the basic structure. This includes styling the nav container, list items, and links, as well as adding hover effects to reveal the dropdown menu.
Example: Interactive Dropdown
<!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;
}
</style>
</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:
Interactive Dropdown
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.
Conclusion
CSS dropdowns are versatile and essential components of modern web design. By understanding and implementing various CSS properties, you can create interactive, stylish, and user-friendly dropdown menus. From basic structures to advanced interactions like clicked dropdowns and image enlargements, mastering these techniques will enhance the functionality and aesthetics of your web pages.
Contact Us