Preview
Codes
<!doctype html>
<html>
<style>
*{
margin:0px;
padding:0px;
font-family:helvetica;
}
.menu{
background:#333;
overflow:hidden;
}
.menu a{
color:white;
padding:14px 16px;
float:left;
text-decoration:none;
font-size:20px;
}
.dropdown{
float:left;
overflow:hidden;
}
.button{
background:#333;
color:white;
font-size:20px;
padding:14px 16px ;
border:none;
}
.menu a:hover, .button:hover{
background:#dfdfdf;
color:black;
}
.drop-content{
display:none;
position:absolute;
background:#dfdfdf;
min-width:160px;
box-shadow:0px 8px 16px 0px #333;
z-index:1 ;
}
.drop-content a{
color:black;
float:none;
display:block;
text-decoration:none;
padding:10px 10px;
}
.drop-content a:hover{
background:#afafaf;
}
.dropdown:hover .drop-content{
display:block;
}
</style>
<body>
<div class="menu">
<a href="#">Home</a>
<a href="#">Item 1</a>
<a href="#">item 2</a>
<a href="#">item 3</a>
<div class="dropdown">
<button class="button">Drop</button>
<div class="drop-content">
<a href="#">drop item 1</a>
<a href="#">drop item 2</a>
<a href="#">drop item 3</a>
<a href="#">drop item 4</a>
<a href="#">drop item 5</a>
</div>
</div>
<a href="#" style="float:right;">item 3</a>
</div>
</body>
</html>
This comment has been removed by the author.
ReplyDeleteDear i have an offer for you regarding a chating website kindly if you are interested contact on this number 00923170588810
ReplyDeleteI will give you amount according to your willingness