CSS Dropdown Menu

 #cssdropdown, #cssdropdown ul { list-style: none; }
 
 #cssdropdown, #cssdropdown * { padding: 0; margin: 0; list-style: none; }
 
 #cssdropdown li.headlink {
  width: 165px;
  float: left;
  margin-left: -1px;
  border: 1px black solid;
  text-align: center;
 }
 #cssdropdown li.headlink a { display: block; padding:0; text-decoration: none; }

 #cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: left; }
 #cssdropdown li.headlink:hover ul { display: block; }
 #cssdropdown li.headlink ul li a { padding: 0; height: 17px; }
 #cssdropdown li.headlink ul li a:hover { background-color: #333; }
 
 
 #cssdropdown a { color: white; } #cssdropdown ul li a:hover { text-decoration: none; }
 #cssdropdown li.headlink {
  background-color:#262626;
 }
 #cssdropdown li.headlink:hover {
 
 background-color:#333;
 }
 #cssdropdown li.headlink ul {
  background-color:#262626;
 }
 
 #cssdropdown li.headlink a {
  font-size:16px; 
  font-weight:bold;
  line-height:44px;
 }
 
 #cssdropdown li.headlink ul li a {
  font-size:12px; 
  font-weight:normal;
  border-top:solid 1px #000000;
  line-height:30px;
  height:30px;
  padding-left:5px;
  text-align:left;
 }
 
 #cssdropdown li.headlink ul li a.first {
  margin-top:-1px;
 }
 
 #cssdropdown {
  position:absolute; top:0; left:0;
 }
 
 
 $(document).ready(function(){
  $('#cssdropdown li.headlink').hover(
   function() { $('ul', this).css('display', 'block'); },
   function() { $('ul', this).css('display', 'none');
  });
 });
 
<table width="1000" border="1" cellpadding="0" cellspacing="0">
 <tr>
  <td><div style="position:relative;">
    <ul id="cssdropdown">
     <li class="headlink"> <a href="#">Home</a> </li>
     <li class="headlink"><a href="#">Archive 2008</a>
      <ul>
       <li><a href="#" class="first">Archive 2008</a></li>
       <li><a href="#">Archive 2009</a></li>
       <li><a href="#">Archive 2010</a></li>
       <li><a href="#">Archive 2011</a></li>
       <li><a href="#">Posts Atom</a></li>
      </ul>
     </li>
     <li class="headlink"><a href="#">Archive 2009</a></li>
     <li class="headlink"><a href="#">Archive 2010</a></li>
     <li class="headlink"><a href="#">Archive 2011</a></li>
     <li class="headlink"><a href="#">Posts Atom</a></li>
    </ul>
   </div></td>
 </tr>
 <tr>
  <td height="100" bgcolor="#FFFFFF">Content</td>
 </tr>
</table>

JQuery UI DropDown

Why you shouldn’t style select boxes look here

Technorati Tags: jquery,ui,dropdown,css,select

Check out this link for nice CSS Dropdown

Also this link here has more details.

Wiki Documentation here