#menu 
{
  width: 400px;
  left: 50%;
  margin-left: -200px; /* - (width/2)  */
  position: relative;
  height:100%;
}

#menuContainer
{
    width:100%;
    background:#ccc; 
    height:17px;
}

/* remove the list style */
#nav {
    margin:0; 
    padding:0; 
    list-style:none;
}   
     
/* make the LI display inline */
/* it's position relative so that position absolute */
/* can be used in submenu */
#nav li {
    float:left; 
    display:block; 
    width:100px; 
    background:#ccc; 
    position:relative;
    text-align:center; 
    z-index:500; 
}
         
/* this is the parent menu */
#nav li a {
    display:block; 
    padding:1px 5px 0 1px; 
    font-weight:700;  
    height:16px; 
    text-decoration:none; 
    color:#fff; 
    text-align:center; 
    color:#333;
}
 
#nav li a:hover {
    color:#fff;
}
     
/* you can make a different style for default selected value */
#nav a.selected {
    color:#f00;
}
     
/* submenu, it's hidden by default */
#nav ul {
    position:absolute; 
    left:0; 
    display:none; 
    margin:0 0 0 -1px; 
    padding:0; 
    list-style:none;
}
         
#nav ul li {
    width:110px; 
    float:left; 
    border-top:1px solid #fff;
    vertical-align:middle;
}
         
/* display block will make the link fill the whole area of LI */
#nav ul a {
    display:block;  
    height:15px;
    padding: 1px 1px; 
    color:#666;
}
         
#nav ul a:hover {
    text-decoration:underline;  
}
 
/* fix ie6 small issue */
/* we should always avoid using hack like this */
/* should put it into separate file : ) */
*html #nav ul {
    margin:0 0 0 -2px;
}