选择式导航

style:

 

<style type="text/css">
   #one{ width:370px; border:gray 0px solid; height:100%;}
   .s1{ width:89px; height:22px; border:red 0px solid; display:inline-block; margin-bottom:-2px;
    background-image:url(daohang1up.gif);text-align:center; float:left; margin-left:1px;
     overflow-y:hidden; font-size:16px; padding-top:2px}
   .s{width:89px; height:22px; border:red 0px solid; display:inline-block; margin-bottom:-2px;
    background-image:url(daohang1up1.gif);text-align:center; float:left; margin-left:1px;
     overflow-y:hidden; font-size:16px; padding-top:2px} 
    .s1 a,.s a{color:blue;}
    .s1 a:hover,.s a:hover{ text-decoration:none; }        
   ul li{ list-style:none; } 
   ul li a{color:#3C3C3C;} 
   #one1{width:380px; border:blue 0px solid; height:191px;}
   #one2,#one3,#one4{width:380px; border:green 0px solid; height:191px; display:none;}
   #one1 ul{margin-left:15px; display:block;}
   #one1 ul li{ list-style-type:none; width:180px;float:left; font-size:11pt;padding:1px}
   #one1,#one2,#one3,#one4{ background-image:url(daohang1bg.gif); background-repeat:no-repeat;}
   a{ text-decoration:none;}
   a:hover{ text-decoration:underline;}
   #one2 ul{ margin-left:10px;}
   #one2 ul li{ width:185px; float:left; font-size:11pt; }
   #one3 ul{ margin-top:5px;}
   #one3 ul li{ padding:5px}
   #one4 ul{ margin-top:10px; margin-left:20px}
   #one4 ul li{width:145px;float:left; font-size:11pt; padding:2px;}  
  </style>

 

 

body:

 

<div id="one">
   <span class="s1" οnmοuseοver="this.style.backgroundImage='url(daohang1up1.gif)';display1(this)" οnmοuseοut="this.style.backgroundImage='url(daohang1up.gif)'"><a href="javascript:void(0);">院系设置</a></span>
   <span class="s1" οnmοuseοver="this.style.backgroundImage='url(daohang1up1.gif)';display2(this)" οnmοuseοut="this.style.backgroundImage='url(daohang1up.gif)'"><a href="javascript:void(0);">党政机关</a></span>
   <span class="s1"  οnmοuseοver="this.style.backgroundImage='url(daohang1up1.gif)';display3(this)" οnmοuseοut="this.style.backgroundImage='url(daohang1up.gif)'"><a href="javascript:void(0);">群团组织</a></span>
   <span class="s1" οnmοuseοver="this.style.backgroundImage='url(daohang1up1.gif)';display4(this)" οnmοuseοut="this.style.backgroundImage='url(daohang1up.gif)'"><a href="javascript:void(0);">直属单位</a></span>
   <div id="one1">
    <ul>
<li><a href="http://dep.hnust.cn/power/" title="a horizontal vertical menu">能源与安全工程学院</a></li>
<li><a href="http://218.75.247.254:12568/tmxy/" title="a horizontal vertical menu">土木工程学院</a></li>
<li><a href="http://dep.hnust.cn/jd/" title="a horizontal vertical menu">机电工程学院</a></li>
<li><a href="http://dep.hnust.cn/sc/" title="a horizontal vertical menu">信息与电气工程学院</a></li>
<li><a href="http://dep.hnust.cn/computer/index.asp" title="a horizontal vertical menu">计算机科学与工程学院</a></li>
<li><a href="http://dep.hnust.cn/chem/" title="a horizontal vertical menu">化学与化工学院</a></li>
<li><a href="http://math.hnust.cn/" title="a horizontal vertical menu">数学与计算科学学院</a></li>
<li><a href="http://dep.hnust.cn/physics/" title="a horizontal vertical menu">物理学院</a></li>
<li><a href="http://dep.hnust.cn/science/" title="a horizontal vertical menu">生命科学学院</a></li>
<li><a href="http://dep.hnust.cn/arc/" title="a horizontal vertical menu">建筑与城乡规划学院</a></li>
<li><a href="http://dep.hnust.cn/rwxy/index.asp" title="a horizontal vertical menu">人文学院</a></li>
<li><a href="http://dep.hnust.cn/wyxy/" title="a horizontal vertical menu">外国语学院</a></li>
<li><a href="http://www.hnust.cn/law/" title="a horizontal vertical menu">法学院</a></li>
<li><a href="http://dep.hnust.cn/Education/index.asp" title="a horizontal vertical menu">教育学院</a></li>
<li><a href="http://dep.hnust.cn/economics_net/index.asp" title="a horizontal vertical menu">商学院</a></li>
<li><a href="http://dep.hnust.cn/art/index.asp" title="a horizontal vertical menu">艺术学院</a></li>
<li><a href="http://dep.hnust.cn/sports/" title="a horizontal vertical menu">体育学院</a></li>
<li><a href="http://dep.hnust.cn/glxy/" title="a horizontal vertical menu">管理学院</a></li>
<li><a href="http://dep.hnust.cn/hkdcj/index.asp" title="a horizontal vertical menu">继续教育和职业技术学院</a></li>
<li><a href="http://www.hnust.edu.cn/group.asp?id=35&pid=2" title="a horizontal vertical menu">潇湘学院</a></li>
    </ul>
   </div>
   <div id="one2">
    <UL class=orgUl>    
 <LI class="zzjglist"><a href="http://dep.hnust.cn/dangban/" target="_blank"> 党委办公室、校行政办公室 </a></LI>
 <LI class="zzjglist"><a href="http://dep.hnust.cn/policy/index.htm" target="_blank"> 政策研究室 </a></LI>
 <LI class="zzjglist"><a href="http://zzb.hnust.cn/" target="_blank"> 组织部、党校 </a></LI>
 <lI class="zzjglist"><a href="group.asp?id=94&pid=2         " target="_blank"> 宣传部</a></lI>
 <LI class="zzjglist"><a href="http://dep.hnust.cn/tzb/" target="_blank"> 统战部 </a></LI>
 <LI class="zzjglist"><a href="http://jw.hnust.cn/jw/" target="_blank"> 纪委、监察处 </a></LI>
 <LI class="zzjglist"><a href="http://dep.hnust.cn/jgdw/" target="_blank"> 校机关党委 </a></LI>
 <LI class="zzjglist"><a href="http://jwc.hnust.cn/" target="_blank"> 教务处 </a></LI>
 <LI class="zzjglist"><a href="http://www.hnust.edu.cn/kyc/" target="_blank"> 科研处 </a></LI>
 <LI class="zzjglist"><a href="http://dep.hnust.cn/xkb/" target="_blank"> 学科建设办公室 </a></LI>
 <LI class="zzjglist"><a href="http://rsc.hnust.cn" target="_blank"> 人事处 </a></LI>
 <LI class="zzjglist"><a href="http://graduate.hnust.cn" target="_blank"> 研究生部、研究生工作处 </a></LI>
 <LI class="zzjglist"><a href="http://xg.hnust.cn/" target="_blank"> 学生工作部、学生工作处 </a></LI>
 <LI class="zzjglist"><a href="http://www.hnust.cn/index_1.htm" target="_blank"> 财务处 </a></LI>
 <LI class="zzjglist"><a href="http://gzc.hnust.cn/" target="_blank"> 国有资产管理处 </a></LI>
 <LI class="zzjglist"><a href="http://dep.hnust.cn/dwll/" target="_blank"> 对外联络处 </a></LI>
 <lI class="zzjglist"><a href="group.asp?id=109&pid=2         " target="_blank"> 审计处</a></lI>
 <lI class="zzjglist"><a href="group.asp?id=110&pid=2         " target="_blank"> 基建处</a></lI>
 <LI class="zzjglist"><a href="http://dep.hnust.cn/houqin" target="_blank"> 后勤管理处 </a></LI>
 <LI class="zzjglist"><a href="http://dep.hnust.cn/bwc/index.asp" target="_blank"> 保卫处、武装部 </a></LI>
 <lI class="zzjglist"><a href="group.asp?id=113&pid=2         " target="_blank"> 离退休工作处</a></lI>
   </UL>
   </div>
   <div id="one3">
    <UL class=orgUl>    
                    <LI class="zzjglist"><a href="http://dep.hnust.cn/gonghui/" target="_blank"> 工会 </a></LI>                  
                    <LI class="zzjglist"><a href="http://www.weixinge.com/" target="_blank"> 团委 </a></LI>                 
   </UL>
   </div>
   <div id="one4">
    <UL class=orgUl>    
<LI class="zzjglist"><a href="http://www.kdjob.net/default.asp" target="_blank"> 就业指导中心 </a></LI>
<LI class="zzjglist"><a href="http://dep.hnust.edu.cn/qikanshe/" target="_blank"> 期刊社 </a></LI>
<LI class="zzjglist"><a href="http://lib.hnust.cn" target="_blank"> 图书馆 </a></LI>
<LI class="zzjglist"><a href="http://www.hnust.edu.cn/nicweb/" target="_blank"> 网络信息中心 </a></LI>
<LI class="zzjglist"><a href="http://dep.hnust.cn/school/" target="_blank"> 附属学校 </a></LI>
<lI class="zzjglist"><a href="group.asp?id=119&pid=2         " target="_blank"> 潇湘学院</a></lI>
<LI class="zzjglist"><a href="http://dep.hnust.cn/keylab/" target="_blank"> 湖南省机械设备健康维护重点实验室 </a></LI>
<LI class="zzjglist"><a href="http://dep.hnust.cn/gcxlzx/" target="_blank"> 工程训练中心 </a></LI>
<LI class="zzjglist"><a href="http://dep.hnust.cn/hospital/" target="_blank"> 校医院 </a></LI>
   </UL>
   </div>
  </div>