div css 下拉式功能表效果代碼

最後更新：2017-01-13 來源：互聯網

上載者：User

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

代碼如下

複製代碼

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.111cn.net/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>網頁特效下拉式功能表</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
body {
font-family:verdana, sans-serif;
font-size:small;
}
#navigation, #navigation li ul {
list-style-type:none;
}
#navigation {
margin:20px;
}
#navigation li {
float:left;
text-align:center;
position:relative;
}
#navigation li a:link, #navigation li a:visited {
display:block;
text-decoration:none;
color:#000;
width:120px;
height:40px;
line-height:40px;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c5dbf2;
padding-left:10px;
}
#navigation li a:hover {
color:#fff;
background:#2687eb;
}
#navigation li ul li a:hover {
color:#fff;
background:#6b839c;
}
#navigation li ul {
display:none;
position:absolute;
top:40px;
left:0;
margin-top:1px;
width:120px;
}
#navigation li ul li ul {
display:none;
position:absolute;
top:0px;
left:130px;
margin-top:0;
margin-left:1px;
width:120px;
}
</style>
<script type="text/javascript">
function displaysubmenu(li) {
var submenu = li.getelementsbytagname("ul")[0];
submenu.style.display = "block";
}
function hidesubmenu(li) {
var submenu = li.getelementsbytagname("ul")[0];
submenu.style.display = "none";
}
</script>
</head>
<body>
<ul id="navigation">
<li onmouseo教程ver="displaysubmenu(this)" onmouseout="hidesubmenu(this)">
<a href="#">欄目1</a>
<ul>
<li><a href="#">欄目1->菜單1</a></li>
<li><a href="#">欄目1->菜單2</a></li>
<li><a href="#">欄目1->菜單3</a></li>
<li><a href="#">欄目1->菜單4</a></li>
</ul>
</li>
<li onmouseover="displaysubmenu(this)" onmouseout="hidesubmenu(this)">
<a href="#">欄目2</a>
<ul>
<li><a href="#">欄目2->菜單1</a></li>
<li><a href="#">欄目2->菜單2</a></li>
<li><a href="#">欄目2->菜單3</a></li>
<li><a href="#">欄目2->菜單4</a></li>
<li><a href="#">欄目2->菜單5</a></li>
</ul>
</li>
<li onmouseover="displaysubmenu(this)" onmouseout="hidesubmenu(this)">
<a href="#">欄目3</a>
<ul>
<li onmouseover="displaysubmenu(this)" onmouseout="hidesubmenu(this)">
<a href="#">欄目3->菜單1</a>
<ul>
<li><a href="#">菜單1->子功能表1</a></li>
<li><a href="#">菜單1->子功能表2</a></li>
<li><a href="#">菜單1->子功能表3</a></li>
<li><a href="#">菜單1->子功能表4</a></li>
</ul>
</li>
<li><a href="#">欄目3->菜單2</a></li>
<li onmouseover="displaysubmenu(this)" onmouseout="hidesubmenu(this)">
<a href="#">欄目3->菜單3</a>
<ul>
<li><a href="#">菜單3->子功能表1</a></li>
<li><a href="#">菜單3->子功能表2</a></li>
<li><a href="#">菜單3->子功能表3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>

導覽功能表二

代碼如下

複製代碼

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns=http://www.111cn.net/1999/xhtml>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>仿菜單</title>
<style type="text/css">
body{font-size:14px;}
ul{margin:0; padding:0; list-style:none;}
a{text-decoration:none; color:#000;}

#menu{position:absolute; top:0; left:100px;width:780px;}
#menu li{float:left; height:34px; line-height:34px;}
#menu li a{ display:block;font-weight:bold;background:url(link.gif) left top; padding-left:20px;}
#menu span{display:block; background:url(link.gif) no-repeat right top; padding-right:20px;}
#menu li a:hover{background:url(hover.gif) no-repeat left top; color:#c30;}
#menu li a:hover span{background:url(hover.gif) no-repeat right top;}

#sub_menu {position:absolute; top:35px; font-size:12px; line-height:2em;}
#sub_menu #sub_2{margin-left:150px;}
#sub_menu #sub_3{margin-left:250px;}
#sub_menu #sub_4{margin-left:350px;}

.dis { display:block; }
.undis { display:none;}
</style>
<script type="text/javascript" language="javascript">

</script>
</head>


<body>
<div id="nav">
<div id="menu">
<ul>
     <li><a href="#" onmouseover="show(1)"><span>凱撒首頁</span></a></li>
        <li><a href="#" onmouseover="show(2)"><span>最新動向頁</span></a></li>
        <li><a href="#" onmouseover="show(3)"><span>產品及預定中心頁</span></a></li>
        <li><a href="#" onmouseover="show(4)"><span>協助及查詢中心頁</span></a></li>
        <li><a href="#" onmouseover="show(5)"><span>會員俱樂部頁</span></a></li>
        <li><a href="#" onmouseover="show(6)"><span>凱撒論壇頁</span></a></li>
    </ul>
</div>
<div id="sub_menu">
<div id="sub_1" class="undis" ></div>
<div id="sub_2" class="undis" ><a href=http://mb.111cn.net>聚焦凱撒</a> | <a href="#">國內新聞</a> | <a href="#">國際新聞</a></div>
    <div id="sub_3" class="undis" ><a href="#">聚焦凱撒</a> | <a href="#">國內新聞</a> | <a href="#">國際新聞</a>聚焦凱撒</a> | <a href="#">國內新聞</a></div>
    <div id="sub_4" class="undis" ><a href="#">預定流程</a> | <a href="#">訂單查詢</a> | <a href="#">線上答疑</a><a href="#">簽證服務</a> | <a href="http://down.111cn.net">出遊寶典</a> | <a href="#">網站地圖</a></div>
    <div id="sub_5" class="undis" ></div>
    <div id="sub_6" class="undis" ></div>
</div>
</div>
</body>
</html>

本文章原先以中文撰寫並發佈於 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

div css 下拉式功能表效果代碼

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support