/* remove the list style */
#nav ul {
    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 ul li {
        float:left; 
        display:block; 
        width:140px; 
        position:relative;
        z-index:5; 
        
        margin:0 1px;
    }
         
    /* this is the parent menu */
    #nav ul li a {
        display:block;
        
        height:18px; 
        text-decoration:none; 
        text-align:center; 
        color: white;
    }

    #nav ul li  {
       padding-top: 2px;
        height:18px;
       text-align:center;
       font-weight: bold;
    }
 
    #nav ul li a:hover {
     
    }
     
    /* you can make a different style for default selected value */
    #nav ul a.selected {
        color:#f00;
    }
     
        /* submenu, it's hidden by default */
        #nav ul ul {
            position:absolute; 
            left:0; 
            top: 20px;
            display:none; 
            margin:0 0 0 -1px; 
            padding:0; 
            list-style:none;
            background-color: #eee;
            border: 1px solid #aaa;

            -moz-box-shadow: 3px 3px 4px rgba(50, 50, 50, 0.45);
            -webkit-box-shadow: 3px 3px 4px rgba(50, 50, 50, 0.45);
            box-shadow: 3px 3px 4px rgba(50, 50, 50, 0.45);
            /* For IE 8 */
            -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
            /* For IE 5.5 - 7 */
            filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
        }
         
        #nav ul ul li {
            width:170px; 
            float:left; 
            margin: 2px;
            height: 18px;
            font-weight: normal;
            padding-bottom: 4px;
            
        }
         
        /* display block will make the link fill the whole area of LI */
        #nav ul ul a {
            display:block;  
            height: 20px;
            text-align: left;
            
            padding: 2px;
            color: black;
            
        }
        
        
         
        #nav ul ul a:hover {
           background-color: #333; color: white;
        }
 
/* fix ie6 small issue */
/* we should always avoid using hack like this */
/* should put it into separate file : ) */
*html #nav ul ul {
    margin:0 0 0 -2px;
}