CSS製作下拉式說明

woff · 發表於 2008-8-28 01:51:49

pulldown.css檔案內容

/* CSS Document */
/* 對IE進行修正behavior:url(csshover.htc) */
body {
background:url(BG.jpg) no-repeat;
font-family:Courier,新細明體;
behavior:url(csshover.htc);
}
a:link,a:visited {
text-decoration:none;
}
ol {
padding:0px;
margin-left:15%;
background:#FFF;
width:85%;
border-top:#AAA 1px solid;
border-bottom:#AAA 1px solid;
}
/* 設定為浮動四周留白功能表文字4字元寬*/
li.mainmenu {
float:left;
list-style:none;
margin:0px;
padding:0.5em 1em;
position:relative;
width:4em;
border:0;
}
/* 當滑鼠游標停在主功能文字上時，使用ul.level1 才生效，換一行才顯示 */
li.mainmenu:hover ul.level1 {
display:block;
}
li.submenu {
border-bottom:#aaa 1px solid;
list-style:none;
width:8em;
margin:0px;
padding:0.5em 1em;
position: relative;
background:url(d.gif) center right no-repeat;
}
/* 當滑鼠游標停在清單項目上時，才生效 */
li:hover {
background-color:#ecebeb;
}
ul {
padding:0px;
margin:0px;
width:10em;
background:#fff;
border:#000 1px solid;
}
/* 含有連結去除清單項目前置字元，連結文字的底線移除 */
li, li a {
border-bottom:#AAA 1px solid;
list-style:none;
margin:0px;
padding:0.5em 1em;
text-decoration:none;
}
/* 第一層功能表 */
ul.level1 {
display:none;
position:absolute;
left:0em;
top:2em;
}
/* 第二、三層功能表 */
ul.level2,
ul.level3 {
display:none;
position:absolute;
left:10em;
top:0em;
}
li.mainmenu:hover ul.level1,
ul.level1 li.submenu:hover ul.level2,
ul.level2 li.submenu:hover ul.level3,
ul.level3 li.submenu:hover ul.level4 {
display:block;
}

複製代碼

index.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.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pulldown</title>
<link href="../pulldown.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>CSS製作下拉式說明</h1>
<ol>
<li class="mainmenu">檔案
<ul class="level1">
<li class="submenu">新增
<ul class="level2">
<li>視窗</li>
<li>郵件</li>
<li>公佈</li>
<li>連結人</li>
</ul>
</li>
<li>開啟舊檔</li>
<li>儲存檔案</li>
<li>另存新檔</li>
<li class="submenu">傳送
<ul class="level2">
<li>以電子郵件傳送連結</li>
<li>以電子郵件傳送畫面</li>
</ul>
</li>
</ul>
</li>
<li class="mainmenu">檢視
<ul class="level1">
<li>工具列</li>
<li>狀態列</li>
<li>瀏覽器列</li>
<li>字型</li>
<li class="submenu">編碼
<ul class="level2">
<li>自動選取</li>
<li>繁體中文</li>
<li>簡體中文</li>
<li class="submenu">其他
<ul class="level3">
<li>日文</li>
<li>韓文</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="mainmenu">工具
<ul class="level1">
<li>郵件和新聞</li>
<li>封鎖快顯程式</li>
<li>管理附加元件</li>
<li>同步處理</li>
<li>Windows Update </li>
<li>網際網路選項</li>
</ul>
</li>
<li class="mainmenu">說明
<ul class="level1">
<li>內容與索引</li>
<li>每日小秘訣</li>
<li>線上支援</li>
</ul>
</li>
</ol>
</body>
</html>

複製代碼

帳號		自動登錄		找回密碼
密碼				註冊

[教學] CSS製作下拉式說明