<!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">
<title>Menu in html</title>
</head>
<style>
.navbar {
background-color: #2d2d2d;
border-radius: 16px;
}
.navbar ul {
overflow: hidden;
}
.navbar li {
float: left;
list-style: none;
padding: 14px 8px;
color: white;
}
.navbar li:hover {
color: red;
}
.search {
float: right;
padding: 12px 75px;
margin-right: 7px;
border: 1px solid black;
border-radius: 20px;
}
.navbar input {
border: 2px solid black;
border-radius: 14px;
padding: 3px 17px;
width: 129px;
}
</style>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Image</li>
<li>Contact Us</li>
<div class="search">
<input type="text" name="Searc" id="search" placeholder="google.com">
</div>
</ul>
</div>
</body>
</html>
Thanks you for commenting your questions. I will see question and respond you.