In this blog we will see how to make a hoverable dropdown word in html through css, you can do so by following the given steps below.
Step 1: Go to notepad and type the given codes below.
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color:grey;
min-width: 160px;
padding: 12px 16px;
z-index: 1;
color:white;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<h2 text align="center">Hoverable Dropdown word.</h2>
<p>Move the cursor over the text below to see the dropdown content. </p>
<div class="dropdown">
<span>Dropdown</span>
<div class="dropdown-content">
<p>This is a dropdown content. </p>
</div>
</div>
</body>
</html>
Step 2:Save the file in .html extension and run.
Step 1: Go to notepad and type the given codes below.
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color:grey;
min-width: 160px;
padding: 12px 16px;
z-index: 1;
color:white;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<h2 text align="center">Hoverable Dropdown word.</h2>
<p>Move the cursor over the text below to see the dropdown content. </p>
<div class="dropdown">
<span>Dropdown</span>
<div class="dropdown-content">
<p>This is a dropdown content. </p>
</div>
</div>
</body>
</html>
Step 2:Save the file in .html extension and run.
Dammi
ReplyDelete