Menu in html in css:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu in html</title>
</head>
<style>
nav{
background-color: rgb(57, 45, 45);
border-radius: 20px;
}
nav ul{
overflow: auto;
}
nav ul li {
float: left;
list-style: none;
padding: 10px;
}
nav ul li a{
text-decoration: none;
color: white;
}
nav ul li a:hover{
/* color: Black;
background-color: aqua; */
font-size: 20px;
}
nav .search{
float: right;
margin: 12px 12px;
border: 1px solid grey;
border-radius: 20px;
}
nav #search{
border-radius: 12px;
padding: 0px 12px;
}
</style>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">Contact</a></li>
<div class="search">
<input type="text" name="search" id="search" placeholder="Search Something">
</div>
</ul>
</nav>
</body>
</html>
Thanks you for commenting your questions. I will see question and respond you.