Html Dropdown Menu with CSS STYLE Code
<!DOCTYPE html>>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="nav.css">
<title>Html Form</title>
</head>
<body>
<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdrown">
<button class="dropbtn">dropdrown</button>
<div class="dropdown b">
<a href="#">link 1</a>
<a href="#">link 1</a>
<a href="#">link 1</a>
</div>
</div>
<p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>
</body>
</html>
CSS Dropdown Menu Style Code
.dropdrown{
display: inline-block;
position: relative;
}
.dropdrown b{
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;
}
.dropbtn{
background-color:#4caf50;
color: #fff;
padding:16px;
font-size:16px;
border: none;
cursor: pointer;
}
.dropdrown b a{
color: #000;
padding:12px 16px;
text-decoration: none;
display: block;
}
.dropdrown:hover .dropdrown b{
display: block;
}
.dropdrown:hover .dropbtn{
background-color: #3e8e41;
}
.dropdrown:hover .dropdrown b{
background-color:#f1f1f1 ;
}
No comments:
Post a Comment