HTML AND CSS CODING:-


<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}

.menu_bar {
  overflow: hidden;
  background-color: #333;
}

.menu_bar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
 
}

.menu_bar a:hover {
  background-color: #ddd;
 
  background-color:green;
}

.menu_bar a.active {
    background-color: #4CAF50;
    color: white;
}
</style>
</head>
<body>

<div class="menu_bar">
  <a class="active" href="#">Home</a>
  <a href="#">About Us</a>
  <a href="#">Product</a>
  <a href="#">Services</a>
  <a href="#">Notice</a>
  <a href="#">Contact</a>
</div>



</body>
</html>








OUTPUT:-