Dropdown Navbar

      
Create A Dropdown Navbar
      
      Create a dropdown menu that appears when the user moves the mouse over an element inside a navigation bar.
      Step 1) Add HTML:
    

      CSS code
     /* Navbar container */
      .navbar {
	  overflow: hidden;
	  background-color: #333;
	  font-family: Arial;
      }

      /* Links inside the navbar */
      .navbar a {
	  float: left;
	  font-size: 16px;
	  color: white;
	  text-align: center;
	  padding: 14px 16px;
	  text-decoration: none;
      }

      /* The dropdown container */
      .dropdown {
	  float: left;
	  overflow: hidden;
      }

      /* Dropdown button */
      .dropdown .dropbtn {
	  font-size: 16px;
	  border: none;
	  outline: none;
	  color: white;
	  padding: 14px 16px;
	  background-color: inherit;
	  font-family: inherit; /* Important for vertical align on mobile phones */
	  margin: 0; /* Important for vertical align on mobile phones */
      }

      /* Add a red background color to navbar links on hover */
      .navbar a:hover, .dropdown:hover .dropbtn {
	  background-color: red;
      }

      /* Dropdown content (hidden by default) */
      .dropdown-content {
	  display: none;
	  position: absolute;
	  background-color: #f9f9f9;
	  min-width: 160px;
	  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	  z-index: 1;
      }

      /* Links inside the dropdown */
      .dropdown-content a {
	  float: none;
	  color: black;
	  padding: 12px 16px;
	  text-decoration: none;
	  display: block;
	  text-align: left;
      }

      /* Add a grey background color to dropdown links on hover */
      .dropdown-content a:hover {
	  background-color: #ddd;
      }

      /* Show the dropdown menu on hover */
      .dropdown:hover .dropdown-content {
	  display: block;
      }