先看css
#navmenu {
    position: relative;
    font-size: 12px;
} 
#navmenu ul {
    position: relative;
    display:block;
    margin-left:0px;
    height:20px;
    border-bottom: 1px solid #000;
    margin:0px;
    padding:0px;
    background-color:#eeeeee
} 
#navmenu ul li {
    display: block;
    list-style-type:none;    
      float: left;
    margin:0px;
}
#navmenu a {
    display: block;
    text-decoration:none;
    margin:2px 2px 0px; 
    padding: 2px 10px;
    color:#555;
} 
#navmenu a:hover {
    display: block;
     position: relative;
    margin:1px 1px 0px; 
    padding: 2px 10px;
    border-top: 1px solid #069;
    border-left: 1px solid #069;
    border-right: 1px solid #069;
    border-bottom: none;
    background-color:#fff;
    color: #000;
    }
#navmenu .selected {
    display: block;
    position: relative;
    margin:1px 1px -1px;
    padding: 2px 10px;
    color: #000;
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    border-right: 1px solid #666;
    border-bottom: 1px solid #fff;
    background-color:#fff;
    float:left;
    }
 

#navclear {
      display: block;
    clear: both; }


下面是htm
<div id="navmenu"> 
    <ul>
      <li><a href="index.html">首 页</a></li>
      <li><a href="class1.htm"  class="selected">部门简介</a></li>
      <li><a href="#">学生党建</a></li>
      <li><a href="#">思想教育</a></li>
      <li><a href="#">日常管理</a></li>
      <li><a href="#">队伍建设</a></li>
      <li><a href="#">心理健康</a></li>
      <li><a href="#">勤工助学</a></li>
      <li><a href="#">国防教育</a></li>
      <li><a href="#">工作交流</a></li>
    </ul>
    <span id="navclear"></span> </div>