.clear {clear:both}
/* remove the list style */
ul.menu {
    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 */
    ul.menu  li {
        float:left;
        display:block;
        width:60px;
        background:#ccc;
        position:relative;
        z-index:500;
        margin:0 1px;
    }
         
    /* this is the parent menu */
   ul.menu  li a {
        display:block;
        padding:8px 5px 0 5px;
        font-weight:700; 
        height:23px;
        text-decoration:none;
        color:#fff;
        text-align:center;
        color:#333;
    }
 
    ul.menu  li a:hover {
        color:#fff;
    }
     
    /* you can make a different style for default selected value */
    ul.menu li.active a {
        color: #C30;
    }
     
        /* submenu, it's hidden by default */
        ul.menu li  ul {
         background:#ccc;
            position:absolute;
            left:0;
            display:none;
            margin:0 0 0 -1px;
            padding:0;
            list-style:none;
        }
         
        ul.menu li  ul li {
            width:140px;
            float:left;
            border-top:1px solid #fff;
        }
         
        /* display block will make the link fill the whole area of LI */
        ul.menu li  ul li a {
            display:block; 
            height:15px;
            padding: 8px 5px;
            color:#333;
         text-align:left;
         font-weight:500px;
        }
         
        ul.menu li ul li a:hover {
            text-decoration:underline; 
        }
 
/* fix ie6 small issue */
/* we should always avoid using hack like this */
/* should put it into separate file : ) */
*html  ul.menu {
    margin:0 0 0 -2px;
}