Horizontally centered varible width menu

HTML

<div class="drop">
<ul class="drop_menu">

  <li><a href='#'>Link 1</a>
    <ul>
      <li><a href='#'>Sub Link 1</a></li>
      <li><a href='#'>Sub Link 2</a></li>
    </ul>
  </li>
  
  <li><a href='#'>Link 2</a>
  </li>
  
</ul>
</div>

CSS

#menu {
    text-align: center;
}

#menu li {
    display: inline;
    background: #000;
    padding: 5px 10px;
    float: left;
    margin: 0 1px 0 0;
}

#menu ul {
    display: inline-block; 
   *display: inline; /* ie7 fix */
}



#menu a {
    color: #fff;   
}


.clearfix:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */

JavaScript

/* horizontally centered varible width menu */