#nav_wrap {
    width:960px;
    padding:0px;
    clear:both;
    height:15px;
    padding-top:8px;
    background-color:#ffffff;
    border-bottom:solid 3px #3D88B5;
    }

#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;    
        position:relative;  
        z-index:500;   
        margin:0;  
    }  
          
    /* this is the parent menu */  
    #nav li a {  
        display:block;
        padding:0;
        margin:0;
        font-weight:700;    
        height:15px;   
        text-decoration:none;   
        color:#333333;   
        text-align:left;   
    }  
  
    #nav li a:hover {  
        color:#3D88B5;
    }  
      
    /* you can make a different style for default selected value */  
    #nav li.about {width:169px; background: url("../images/nav_about.png") 0 0 no-repeat;}
    #nav li.about:hover {background: url("../images/nav_about_hover.png") 0 0 no-repeat;}
    
    #nav li.projects {width:189px; background: url("../images/nav_projects.png") 0 0 no-repeat;}
    #nav li.projects:hover {width:189px; background: url("../images/nav_projects_hover.png") 0 0 no-repeat;}
    
    #nav li.plan {width:217px; background: url("../images/nav_plan.png") 0 0 no-repeat;}
    #nav li.plan:hover {width:217px; background: url("../images/nav_plan_hover.png") 0 0 no-repeat;}

    
    #nav li.edu {width:254px; background: url("../images/nav_edu.png") 0 0 no-repeat;}
    #nav li.edu:hover {background: url("../images/nav_edu_hover.png") 0 0 no-repeat;}
    
    #nav li.research {width:131px; background: url("../images/nav_research.png") 0 0 no-repeat;}
    #nav li.research:hover {width:131px; background: url("../images/nav_research_hover.png") 0 0 no-repeat;}
      
        /* submenu, it's hidden by default */  
        #nav ul {  
            position:absolute;   
            left:0;   
            display:none;   
            margin:0 0 0 -1px;   
            padding:0 0 0 0;   
            list-style:none;
            border-bottom:1px solid #fff;
        } 
        
        #nav li.about ul { left:0px;}
        
        #nav ul li {  
            width:100%;   
            float:left;   
            border-top:1px solid #fff;  
        }  
        
        #nav ul li.first {  
            width:100%;   
            float:left;   
            border-top:1px solid #3D88B5;  
        }  
          
        /* display block will make the link fill the whole area of LI */  
       #nav ul a {  
            display:block;    
            height:13px;  
            padding: 6px 0 6px 15px;
            font-size:11px;
            color:#fff;
            text-align:left;
            background: url("../images/nav_sub.png") 0 0px no-repeat !important;
        }
          
        #nav ul a:hover {
            display:block;    
            color:#fff;
            background: url("../images/nav_sub.png") 0 -33px no-repeat !important;  
        }
        
        #nav li.about ul a { width:235px !important; }
        #nav li.projects ul a { width:200px !important; }
        #nav li.plan ul a { width:217px !important; }
        #nav li.edu ul a { width:254px !important; }
        #nav li.research ul a { width:131px !important; }
  
/* 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 0px;  
}