Friday, 24 February 2017

CSS Drop Down Menu


CSS Drop Down Menu





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>