Khmer Web: Dropdown Menu

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title>Dropdown Menu</title>
    <style>
      ul {
  		list-style-type: none;
  		margin: 0;
  		padding: 0;
  		overflow: hidden;
  		background-color: #333;
	  }

	  li {
  		float: left;
  		margin-bottom:0;
	  }

	  li a {
  		display: block;
  		color: white;
  		text-align: center;
  		padding: 14px 16px;
  		text-decoration: none;
	  }

	  li a:hover:not(.active) {
  		background-color: #111;
	  }

	  .active {
  		background-color: teal;
	  }

	  .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;
	  }

	  .dropdown-content a {
  		color: black;
  		padding: 12px 16px;
  		text-decoration: none;
  		display: block;
  		text-align: left;
	  }
    
	  .dropdown-content a:hover {background-color: #f1f1f1 !important;}
    
	  .dropdown:hover .dropdown-content {
     	display: block;
	  }
    </style>
  </head>
  
  <body>
	<ul>
  		<li><a class="active" href="#home">Home</a></li>
  		<li class="dropdown">
   			<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    		<div class="dropdown-content">
      			<a href="#">Link 1</a>
      			<a href="#">Link 2</a>
      			<a href="#">Link 3</a>
    		</div>
  		</li>
  		<li><a href="#contact">Contact</a></li>
  		<li><a href="#about">About</a></li>
	</ul>
  </body>
</html>