Dropdown Menu sử dụng CSS và JavaScript

<style>
body{background:#666}
.dropbtn{font-size:16px;cursor:pointer;color:#fff}
.dropbtn:hover{color:#ff0000;-webkit-transition:all .25s linear;-moz-transition:all .25s linear;-ms-transition:all .25s linear;-o-transition:all .25s linear;transition:all .25s linear}
.dropdown{position:relative;display:inline-block}
.dropdown-content{display:none;position:absolute;background-color:#f9f9f9;min-width:160px;margin-top:10px;box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);z-index:100;border:1px solid #e8e8e8}
#myDropdown ul{list-style:none;margin:0;padding:0}
.dropdown-content ul li a{color:#000;padding:12px 20px;text-decoration:none;display:block;text-align:left}
.dropdown-content ul li a:hover{color:#ff0000;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
div#myDropdown ul:before,div#myDropdown ul:after{content:"";position:absolute;left:13px;z-index:100;border-left:12px solid transparent;border-right:12px solid transparent}
div#myDropdown ul:after{top:-10px;border-bottom:13px solid #fafafa}
div#myDropdown ul:before{top:-11px;border-bottom:13px solid #eeeeee}
.show{display:block}
</style>

<center><br />
<div class="dropdown"> <a onclick="myFunction()" class="dropbtn">Click me</a>
  <div id="myDropdown" class="dropdown-content">
    <ul>
      <li> <a href="#home">Home</a> </li>
      <li><a href="#about">About</a> </li>
      <li><a href="#contact">Contact Me</a> </li>
      <li><a href="#contact">Fanpage</a> </li>
      <li><a href="#contact">Policy</a> </li>
      <li><a href="#contact">Sitemap</a> </li>
    </ul>
  </div>
</div>
</center>

<script type='text/javascript'>//<![CDATA[
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
//]]></script>