.jpg)
There are all code copy and paste on your code editor
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Navigation Menu</title>
</head>
<body>
<div id="wrap">
<ul class="navbar">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Books</a>
<ul>
<li>
<a href="#">CBSE</a>
</li>
<li>
<a href="#">ICSE</a>
</li>
<li>
<a href="#">NCERT</a>
</li>
<li>
<a href="#">Poem Books</a>
</li>
</ul>
</li>
<li>
<a href="#">Quizzes</a>
<ul>
<li>
<a href="#">CSS Quizzes</a>
</li>
<li>
<a href="#">PHP Quizzes</a>
</li>
<li>
<a href="#">JavaScript Quizzes</a>
</li>
</ul>
</li>
<li>
<a href="#">Tools</a>
<ul>
<li>
<a href="#">Geomatric Tools</a>
</li>
<li>
<a href="#">Color Tools</a>
</li>
<li>
<a href="#">Password Manager</a>
</li>
<li>
<a href="#">HTML Tools</a>
</li>
<li>
<a href="#">Other Tools</a>
</li>
</ul>
</li>
<li>
<a href="#">Snnipets</a>
<ul>
<li>
<a href="#">Movies</a>
</li>
<li>
<a href="#">Video</a>
</li>
<li>
<a href="#">Music</a>
</li>
<li>
<a href="#">App</a>
</li>
</ul>
</li>
<li>
<a href="#">Languages</a>
<ul>
<li>
<a href="#">Hindi</a>
</li>
<li>
<a href="#">English</a>
</li>
<li>
<a href="#">Tamil</a>
</li>
<li>
<a href="#">Marathi</a>
</li>
</ul>
</li>
<li>
<a href="#">INFO</a>
<ul>
<li>
<a href="#">About us</a>
</li>
<li>
<a href="#">Read Me</a>
</li>
<li>
<a href="#">Policy</a>
</li>
</ul>
</div>
<hr>
<p style="color: white;"> Lorem ipsum dolor sit amet consectetur adipisicing elit. A, deserunt rerum reiciendis earum omnis saepe quas est iusto. Laboriosam asperiores officia eaque labore reiciendis commodi. Velit aliquam ab eos harum neque, necessitatibus recusandae ipsa dolorem quos. Recusandae, aut nesciunt. Iste sed beatae eum aspernatur repellendus labore, blanditiis laboriosam, debitis quibusdam, accusantium voluptas quas? Distinctio adipisci ducimus, quas, veritatis deserunt rerum debitis obcaecati enim nesciunt modi consequuntur blanditiis laudantium quisquam fugiat laborum iusto odio officiis quam, illum voluptate doloribus perspiciatis recusandae voluptatem praesentium. At adipisci soluta repellat beatae libero quo corporis ut quae, eos suscipit ab voluptas. Aut quidem iste numquam voluptatum, ab rem minima quos nulla illum at perferendis ut expedita deleniti commodi dolores autem corporis similique provident asperiores eos possimus et voluptatibus quas nam? Doloribus dolorum voluptate debitis veniam hic eligendi nesciunt! Atque beatae, quibusdam voluptatem eos harum placeat magni fuga fugit similique sit libero possimus officia minima nihil.
</p>
</body>
</html>
CSS Code
body{
background-color: rgb(23, 216, 71);
}
#wrap {
width: 100%;
height: 50px;
margin: 0;
z-index: 99;
position: relative;
background-color: #050101;
}
.navbar {
height: 50px;
padding: 0;
margin: 0;
position: absolute;
}
.navbar li {
height: auto;
width: 135.8px;
float: left;
text-align: center;
list-style: none;
font: normal bold 13px/1em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
background-color: #0e0000;
}
.navbar a {
padding: 18px 0;
border-left: 1px solid #67d83a;
text-decoration: none;
color: white;
display: block;
}
.navbar li:hover,
a:hover {
background-color: #98e47a;
}
.navbar li ul {
display: none;
height: auto;
margin: 0;
padding: 0;
}
.navbar li:hover ul {
display: block;
}
.navbar li ul li {
background-color: #60d355;
}
.navbar li ul li a {
border-left: 2px solid #ad6de0;
border-top: 1px solid #1e5366;
border-bottom: 3px solid #110505;
border-right: 1px solid #ad6de0;
}
.navbar li ul li a:hover {
background-color: #380808;
}
.jpg)
