CSS代碼：[code=html]
.navgation{background: #FFFFFF; min-height:50px;margin-top: 4px;}
.navgation ul{margin: 0;padding: 0;list-style: none;}
.navgation ul li{float: left;border-left: #27ae60;border-right: #336699;position: relative;}
.navgation ul li:first-child{border-left: 0px solid;transition-duration:1s ;}
.navgation ul li:last-child{border-right: 0px solid;}
.navgation ul li a{color:#e74c3c;display:block;padding: 15px;text-decoration: none;}
.navgation ul li a:hover{background: #e67e22;transition-duration:0.2s ;color: #FFFFFF;}
.navgation ul li ul{position:absolute;left: 5000px;background: #336699;}
.navgation ul li:hover ul{left: 0;}
.navgation ul li ul li{float: none;width: 94px;border-bottom: 1px solid white;border-left: 0px solid;border-right: 0px solid;}
.navgation ul li ul li a{background: #c0392b;color:white;padding: 5px 10px;transition-duration:1s ;}
.navgation ul li ul li:last-child{border-bottom: 0px solid;}
.navgation{margin-left: 195px;text-align: center;font-family: "century gothic";}
.two{
font-size: 11px;
font-family: "century gothic";
}
HTML代碼：
<div class="navgation">
<ul>
<li><a href="https://bbs.csdn.net/topics/#">學校概況</a>
<ul class="two">
<li class="two"><a href="https://bbs.csdn.net/topics/#">學校簡介</a></li>
<li><a href="https://bbs.csdn.net/topics/#">歷史沿革</a></li>
<li><a href="https://bbs.csdn.net/topics/#">現任領導</a></li>
<li><a href="https://bbs.csdn.net/topics/#">機構設定</a></li>
<li><a href="https://bbs.csdn.net/topics/#">校園風貌</a></li>
<li><a href="https://bbs.csdn.net/topics/#">歷任領導</a></li>
</ul>
</li>
<li><a href="https://bbs.csdn.net/topics/#">機構組織</a>
<ul class="two">
<li><a href="https://bbs.csdn.net/topics/#">黨群部門</a></li>
<li><a href="https://bbs.csdn.net/topics/#">行政部門</a></li>
<li><a href="https://bbs.csdn.net/topics/#">教學單位</a></li>
<li><a href="https://bbs.csdn.net/topics/#">教輔部門</a></li>
<li><a href="https://bbs.csdn.net/topics/#">科研部門</a></li>
<li><a href="https://bbs.csdn.net/topics/#">獨立學院</a></li>
</ul>
</li>
<li><a href="https://bbs.csdn.net/topics/#">人才培養</a>
<ul class="two">
<li><a href="https://bbs.csdn.net/topics/#">本專科教育</a></li>
<li><a href="https://bbs.csdn.net/topics/#">研究生教育</a></li>
<li><a href="https://bbs.csdn.net/topics/#">留學生教育</a></li>
<li><a href="https://bbs.csdn.net/topics/#">理科綜合實驗</a></li>
<li><a href="https://bbs.csdn.net/topics/#">創新創業教育</a></li>
<li><a href="https://bbs.csdn.net/topics/#">教務管理系統</a></li>
</ul>
</li>
<li><a href="https://bbs.csdn.net/topics/#">師資隊伍</a></li>
<li><a href="https://bbs.csdn.net/topics/#">學術期刊</a></li>
<li><a href="https://bbs.csdn.net/topics/#">招生就業</a>
<ul class="two">
<li><a href="https://bbs.csdn.net/topics/#">本專科招生</a></li>
<li><a href="https://bbs.csdn.net/topics/#">就業資訊網</a></li>
<li><a href="https://bbs.csdn.net/topics/#">研究生招生</a></li>
</ul>
</li>
<li><a href="https://bbs.csdn.net/topics/#">科學研究</a></li>
<li><a href="https://bbs.csdn.net/topics/#">學生管理</a>
<ul class="two">
<li><a href="https://bbs.csdn.net/topics/#">學生作業處</a></li>
<li><a href="https://bbs.csdn.net/topics/#">學生資助管理系統</a></li>
<li><a href="https://bbs.csdn.net/topics/#">學工管理系統</a></li>
<li><a href="https://bbs.csdn.net/topics/#">數字迎新系統</a></li>
</ul>
</li>
<li><a href="https://bbs.csdn.net/topics/#">圖書館藏</a>
<ul class="two">
<li><a href="https://bbs.csdn.net/topics/#">圖書館主頁</a></li>
<li><a href="https://bbs.csdn.net/topics/#">圖書VPN資源</a></li>
<li><a href="https://bbs.csdn.net/topics/#">藏書查詢（校內）</a></li>
<li><a href="https://bbs.csdn.net/topics/#">藏書查詢（校外）</a></li>
</ul>
</li>
<li><a href="https://bbs.csdn.net/topics/#">網路服務</a>
<ul class="two">
<li><a href="https://bbs.csdn.net/topics/#">統一身份認證</a></li>
<li><a href="https://bbs.csdn.net/topics/#">學生網上繳費</a></li>
<li><a href="https://bbs.csdn.net/topics/#">郵件系統</a></li>
<li><a href="https://bbs.csdn.net/topics/#">VPN登錄</a></li>
<li><a href="https://bbs.csdn.net/topics/#">計算機公共基礎</a></li>
<li><a href="https://bbs.csdn.net/topics/#">大學英語學習</a></li>
<li><a href="https://bbs.csdn.net/topics/#">花椒客戶端</a></li>
<li><a href="https://bbs.csdn.net/topics/#">花椒自助服務</a></li>
</ul>
</li>
</ul>
</div>[/code]
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/86969.html
標籤：非技術區