DIV+CSS導覽功能表代碼，挺不錯的。共用下

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

第一種，如果要看示範，建立記事本，把下面代碼加進去後儲存，檔案名稱改成：abc.htm,然後直接運行就可以看了。
Copy code

<style type="text/css">
#nav{
height: 44px;
width: 600px;
background: #FFF;
}
.vline{
background: #999;
width: 1px;
height: 20px;
}
#nav ul{
margin:0px;
padding: 0px;
list-style-type: none;
}
#nav li{
float: left;
font-family: Arial;
font-weight: bold;
font-size: 12px;
text-align: center;
}
#nav li a{
display: block;
width: 84px;
line-height: 28px;
color: #666;
text-decoration: none;
border-top: 4px solid #0F35A5;
}
#nav li a:hover{
color: #7C8DD9;
border-top: 4px solid #7C8DD9;
}
</style>
<div id="nav"><ul><li><a href="#">蝸牛線上</a></li><li class="vline"></li>
<li><a href="#">蝸牛線上</a></li><li class="vline"></li>
<li><a href="#">蝸牛線上</a></li><li class="vline"></li>
<li><a href="#">蝸牛線上</a></li><li class="vline"></li>
<li><a href="#">蝸牛線上</a></li><li class="vline"></li>
<li><a href="#">蝸牛線上</a></li><li class="vline"></li>
<li><a href="#">蝸牛線上</a></li><li class="vline"></li>
</ul></div>

第二種：

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title><a href="http://blog.h3bbs.com" target="_blank">天涯部落格</a>純CSS快顯功能表</title>
<style type="text/css">
<!--
body{
margin-top:0px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
background:#fff;
text-align:center;
color: #333;
font-family:arial,verdana,sans-serif;
}

#topbanner{
margin-left:auto;
margin-right:auto;
width:580px;
height:40px;
border-bottom:5px solid #ff9900;
}

#bottom{
margin-left:auto;
margin-right:auto;
width:580px;
height:40px;
border-top:5px solid #ff9900;
}

/*菜單樣式定義*/
#menu{
clear:both;
margin-right: auto;
margin-left: auto;
width:580px;
height:24px;
color:#fff;
background-color:#900;
}

/*主菜單樣式定義*/
.mainmenu{
float:left;
width:64px;
font-size:13px;
color:#fff;
border-left:1px solid #999;
}

.menucontent{
float:left;
width:80px;
height:20px;
color:#fff;
padding-top:4px;
}

.menucontent a:link {
color: #fff;
display:block;
text-decoration: none;
}

.menucontent a:visited {
color: #fff;
display:block;
text-decoration: none;
}

.menucontent a:hover {
color: #fff;
text-decoration: none;
background-color:#000;
}

/*子功能表樣式定義*/
.submenu{
clear:both;
float:left;
position:absolute;
width:80px;
padding:0px;
font-size:13px;
}

.submenu ul {
background-color:#eee;
list-style-type:none;
width:82px;
line-height:24px;
}

.submenu li {
border-bottom: #ccc 1px dotted;
}

.submenu li a:link,a:visited {
color: #333;
display: block;
text-decoration: none;
}

.submenu li a:hover {
color: #fff;
text-decoration: none;
background-color:#900;
border-top:1px solid #fff;
}
-->
</style>
</head>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More