HTML & CSS
<style> *{ padding: 0; margin: 0; } body{ background-image: url("back.jpg"); background-position: center; box-sizing: border-box; font-family: sans-serif; color: white; } .menu-bar { margin-top: 0px; padding: 0px; background: rgb(0,100,0); text-align: center; position: fixed; } .menu-bar ul { display: inline-flex; list-style: none; color: #fff; } .menu-bar ul li { width: 120px; margin: 15px; padding: 15px; } .menu-bar ul li a { text-decoration: none; color: #fff; } .active, .menu-bar ul li:hover { background: #2bab0d; border-radius: 3px; } </style> <body> <div class="menu-bar"> <ul> <li class="active"> <a href="#Home">Home </a></li> <li> <a href="#About Us">About Us </a></li> <li> <a href="#Services">Services </a></li> <li>...