You can create a hover able dropdown with CSS.
This means the dropdown lists are seen when you mouse hover on the element.
With CSS you can create different kind of dropdowns.
You can also add different styles to the dropdown menu.
You can create a dropdown in texts, links and images also.
Example : Transparency / Opacity
<!DOCTYPE html>
<html>
<head>
<style>
/* Link button Drop Down Style */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: blue;
width:95px;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .linkdropdown:hover .dropbtn {
background-color: red;
}
li.linkdropdown {
display: inline-block;
}
.linkdropdown-content {
display: none;
position: absolute;
background-color: yellow;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.linkdropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.linkdropdown-content a:hover {background-color: #f1f1f1;}
.linkdropdown:hover .linkdropdown-content {
display: block;
}
/* Text Drop Down Style */
.textdropdown {
position: relative;
display: inline-block;
}
.textdropdown-content {
display: none;
position: absolute;
background-color: blue;
color:white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.textdropdown:hover .textdropdown-content {
display: block;
}
/* Image Drop Down Style */
.imagedropdown {
position: relative;
display: inline-block;
}
.imagedropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.imagedropdown:hover .imagedropdown-content {
display: block;
}
</style>
</head>
<body>
<div>
<ul>
<li class="linkdropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="linkdropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
<hr>
<hr>
<hr>
</div>
<div class="textdropdown">
<span>Code Always</span>
<div class="textdropdown-content">
<p>Code Always to Become Best Programmer.</p>
</div>
</div>
<hr>
<hr>
<hr>
<div class="imagedropdown">
<img src="img_5terre.jpg" alt="css" width="100" height="50">
<div class="imagedropdown-content">
<img src="img_5terre.jpg" alt="css" width="300" height="200">
</div>
</body>
</html>
Hover your mouse on the link button, text and image below to see the drop down result.
When the above code is compiled , it produces the following result.
Result
Code Always
Code Always to Become Best Programmer.