Create Transparent Drop Down Navigation Menu with CSS and HTML
similiar code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li>
<a href="#">About</a>
<ul>
<li><a href="#">Activities</a></li>
<li><a href="#">Perks</a></li>
<li><a href="#">Shops</a></li>
<li><a href="#">Events</a></li>
</ul>
</li>
<li><a href="#">Things to do</a></li>
<li>
<a href="#">Contact</a>
<ul>
<li><a href="#">Map</a></li>
<li><a href="#">directions</a></li>
</ul>
</li>
<li><a href="#">News</a></li>
</ul>
</nav>
</body>
</html>
style.css
* {
margin: 0px;
padding: 0px;
}
body {
background: url('bg.jpg') no-repeat;
background-size: cover;
}
nav {
margin-left: 20px;
}
nav ul li {
float: left;
list-style: none;
background-color: #1f1f1f;
text-align: center;
height: 40px;
line-height: 40px;
width: 200px;
/* yadi ham yahan suitable width nhi dete to sub li block roop me nhi ho pata */
font-size: 20px;
margin-right: 5px;
opacity: 0.8;
}
nav ul li a {
display: block;
color: #fff;
text-decoration: none;
}
nav ul li:hover {
background-color: crimson;
}
nav ul li ul li {
display: none;
}
nav ul li:hover ul li {
display: block;
background-color: #1f1f1f;
}
nav ul li ul li:hover {
background-color: green;
}
source video:
Comments
Post a Comment