Add Cool Drop Down Menu in Blogger

<div id='menubor'></div><center><ul id='menu'>
<li><a class='hmlink' href='#'>Home</a></li>
<li><a class='winlink' href='#'>Blogger Templates</a></li>
<li><a class='maclink' href='#'>Blogger Widgets</a></li>
<li><a class='andlink' href='#'>How To Tuts</a></li>
<li><a class='gamlink' href='#'>Privacy Policy</a></li>
<li><a class='seclink' href='#'>Guest Post</a></li>
<li><a class='linlink' href='#'>About</a></li>
</ul></center>
<style>
#menu li {               
 display: inline;               
 list-style: none;               
 padding: 0;           
 }                   

 #menu li a {                                 
 padding: 15px 20px 15px 20px;               
 text-decoration: none;               
  color:white;
  font-family: 'Noto Serif', serif;
-moz-box-shadow: inset 0 0 13px -2px #000;
-webkit-box-shadow: inset 0 0 13px -2px #000;
box-shadow: inset 0 0 13px -2px #000;
  font-size:18px;
  -webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
  transition: padding-bottom .666s;
-webkit-transition: padding-bottom .666s;
-moz-transition: padding-bottom .666s;
-o-transition: padding-bottom .666s;
-ms-transition: padding-bottom .666s;
  
  
}
 #menu li a:hover {                                 

  padding-bottom:20px;
}
.hmlink{
  background:#24459A;
}
.winlink{
  background-color: rgba(9,173,217,1);
}
.maclink{
  background-color: rgba(108,109,112,1);
}
  .weblink{
    background:#EEEE00;
    color:black;
  }
.andlink{
  background-color: rgba(149,191,43,1);
}
.gamlink{
  background-color: rgba(212,2,43,1);
}
.seclink{
  background-color: rgba(0,158,62,1);
}
.linlink{
  background-color: rgb(123, 82, 138);
}
#menubor{
  border-top:1px solid black;
  margin-bottom:-1px;
}
  .header-outer{
    padding-bottom:20px;
  }
</style>