Hover dropdown menu
Create Hover Dropdown Menu
Dropdown down menu type one is hover dropdown menu when the mouse is over the button the menu will be open it mean hover the mouse.
a list under dropdown menu will be open whenever the mouse is over the dropdown menu.
following are the main step of creating this tutorial
00 open VS code editor
01 create file index.html and style.css file
02 code in html document to create the structure of dropdown menu
03 code in CSS to styling the dropdown menu
04 take demo finally we create a dropdown menu
Hover Dropdown menu source code
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hoverable dropdown</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h2>Mouseover / Hoverable Dropdown</h2>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">blog</a>
<a href="#">hire</a>
<a href="#">portfolio</a>
</div>
</div>
</div>
</body>
</html>
style.css
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container {
display: flex;
justify-content: space-around;
align-items: center;
padding: 10px;
margin: 10px;
box-shadow: 0 0 30px 0;
border: 2px solid rgb(7, 138, 88);
width: 50%;
}
.dropbtn {
background-color: #275ae6;
color: white;
padding: 16px;
font-size: 16px;
border: none;
border-radius: 10px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #bbb2b2;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
Comments
Post a Comment