<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta charset='utf-8' />
<title></title>
<style>
span {
padding:5px;
background-color:#658587;
text-align:center;
}
p {
text-align:center;
padding:10px;
background-color:#fff;
border-radius:10px;
transition:0.5s;
}
p:hover {
color:white;
font-size:20px;
cursor:pointer;
background-color:#57C16F;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #B5D0D2;
border-radius:10px;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(4,0,0,0.2);
padding: 5px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<h3>Hover on the fruits button </h3>
<p>Move the mouse over the text below to open the dropdown content.</p>
<div class='dropdown'>
<span>Fruits </span>
<div class='dropdown-content'>
<p>Apple</p>
<p>Banana</p>
<p>Orange</p>
<p>Grapes</p>
<p>Mango</p>
<p>Chery</p>
<p>Kiwi</p>
</div>
</div>
</body>
</html>
How to dropdown menu using HTML and CSS?
Asked 19-Jul-2021
Viewed 411 times
