Definition:
CSS text hover dropdown appears when you put your mouse cursor over the text and a dropdown item will be shown. See a source code to achieve this function using CSS code.
Mouse Over Text Dropdown
Source Code:
Text Hover Dropdown
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown_item {
display: none;
position: absolute;
background-color: lightgray;
min-width: 100%;
}
.dropdown_item a {
display: block;
color: black;
padding: 10px;
text-decoration: none;
border-bottom:1px solid white;
}
.dropdown:hover .dropdown_item {
display: block;
}
.dropdown_item a:hover {
background-color: #f8f8ff
}
</style>
</head>
<body>
<h3>Text Hover Dropdown</h3>
<p>Put your mouse cursor over the text below to open dropdown items.</p>
<div class="dropdown">
<span>Bring cursor over me</span>
<div class="dropdown_item">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</body>
</html>
Output:
Donate to support writers
You may be interested in the following topics: