This is your page text underneath of menu and menu will overlap this text because of z index
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--end boot
strap-->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Girfa : Student Help :: Drop Down Menu </title>
<style>
.container
{
position:relative;
display:inline-block;
}
.btn
{
padding:10px;
border-radius:20px;
background-color:#FF66FF;
color:#FFFFFF;
border:none;
cursor:pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration:
0.4s;
}
.menu
{
display:none;
position:absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index:1;
}
.menu a
{
text-decoration:none;
display:block;
padding:10px 10px;
background-color:#F2F2F2;
}
.menu a:hover
{
background-color:#D4D4D4;
}
.container:hover .btn
{
background-color:#FF00FF;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px
50px 0 rgba(0,0,0,0.19);
}
.container:hover .menu
{
display:block;
}
</style>
</head>
<body>
<div class="container">
<button class="btn">
Home
</button>
<div class="menu">
<a href="#">Link1 </a>
<a href="#">Link1 </a>
<a href="#">Link1 </a>
</div>
</div>
<div class="container">
<button class="btn">
About
</button>
<div class="menu">
<a href="#">Text 1 </a>
<a href="#">Text 2 </a>
<a href="#">Text 3 </a>
</div>
</div>
<div class="container">
<button class="btn">
Contact
</button>
<div class="menu">
<a href="#">Item 1 </a>
<a href="#">Item 2 </a>
<a href="#">Item 3 </a>
</div>
</div>
<br />
This is
your page text underneath of menu and menu will overlap this text because of z
index
</body>
</html>
No comments:
Post a Comment