<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) {