HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>Dropdown</title>
<link rel="stylesheet" href="htmldrop.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="topnav">
<a href="">Home</a>
<a href="">Contact</a>
<a href="">Location</a>
<a href="" class="confused">Subscribe</a>
<div class="abdrop">
<a href="" class="abnav">About</a>
<div class="abdropdown">
<a href="">Disclaimer</a>
<a href="">Privacy Policy</a>
<a href="">Terms & Conditions</a>
</div>
</div>
</div>
</body>
</html>
CSS CODE:
body{
background-image: url(ocean.jpg);
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
margin:0px;
}
div>a{
text-decoration: none;
text-transform: uppercase;
color:wheat;
padding:10px;
}
.topnav{
padding:15px;
background-color: black;
}
.topnav a{
display:inline-block;
position:relative;
}
.confused{
float:right;
}
.abdrop{
display:inline-block;
}
.abnav{
position:relative;
}
.abdropdown{
display:none;
position:absolute;
z-index:1;
}
.abdropdown a{
display:block;
border-bottom: 1px solid honeydew;
}
.topnav a:hover{
background-color:fuchsia;
}
.abdrop:hover .abdropdown{
display:block;
background-color: teal;
}
.confused:hover{
background-color: red !important;
}
No comments :
Post a Comment