<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'> </link> <style> .navbar {   overflow: hidden;   background-color: #333;   font-family: Arial, Helvetica, sans-serif; } .navbar a {   float: left;   font-size: 16px;   color: white;   text-align: center;   padding: 14px 16px;   text-decoration: none; } .dropdown {   float: left;   overflow: hidden; } .dropdown .dropbtn {   cursor: pointer;   font-size: 16px;     border: none;   outline: none;   color: white;   padding: 14px 16px;   background-color: inherit;   font-family: inherit;   margin: 0; } .navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {   background-color: #008C8C; } .dropdown-content {   display: none;   position: absolute;   background-color: #f9f9f9;   min-width: 160px;   box-shadow: 0px 8px ...

  <div class='navbar'>   <a href='#'>Home</a>   <a href='#'>Product</a>   <div class='dropdown'>   <button class='dropbtn' onclick='myFunction()'>More     <i class='fa fa-caret-down'/>   </button>   <div class='dropdown-content' id='myDropdown'>     <a href='#'>Submenu 1</a>     <a href='#'>Submenu 2</a>     <a href='#'>Submenu 3</a>     <a href='#'>Submenu 4</a>     <a href='#'>Submenu 5</a>   </div>   </div>  </div> <script> /* When the user clicks on the button,  toggle between hiding and showing the dropdown content */ function myFunction() {   document.getElementById(&quot;myDropdown&quot;).classList.toggle(&quot;show&quot;); } // Close the dropdown if the user clicks outside of it window.onclick = function...