文字：
首頁 服務公告 分行特色 關於分行
在“分行特色”下邊還有子菜單：
學生時代 職場生涯 品質家庭 養老保障
導航條設計一般是采用列表做容器，但列表是塊元素，於是用浮動(fliat)方式。很多時候導航條中的菜單還有子菜單，子菜單的顯示用鼠標移動到主菜單時彈出。這時用列表嵌套的思路如下面：
- 首頁
- 服務公告
- 分行特色
- 學生時代
- 職場生涯
- 品質家庭
- 養老保障
- 關於分行
打開DW軟件，配置站點：
站點名稱：第七周練習（7week)；站點根目錄（本地站點）：E盤或自己的U盤，在本地站點下面創建圖片文件夾img ,樣式表文件夾CSS，腳本文件夾JS。馬上創建一個網頁文件並以約定名稱保存（月10日14班J2/j3姓名**）
頁面內容創建
在頁面中創建一個DIV容器，在容器中建立一個嵌套列表，並創建空的超鏈接，如下圖：
頁面效果：
代碼：
為了格式整齊：在首頁兩個字之間插入空格符，為了提示分行特色有子菜單，插入一個特殊符號。（通過插入菜單-HTML-特殊字符 添加）
開始樣式設置
先生成CSS文件或者之后再生成。
(1)通配符選擇器*，內外邊距為0（給頁面所有對象的內外邊距初始化為0像素，消除它們的內外邊距默認值 ）
(2)給最外層容器設定寬度1000PX，背景色為#CCC，並自動居中。
(3)給主菜單設置樣式：
寬120PX，高40PX，文字（水平及垂直居中），左浮動（float left)，列表樣式為無）
(4)把子菜單隱藏：#top-nav ul li ul { display: none;}
(5)把超鏈接的默認格式取消：下划線無，字的着色為黑。
有個細節：浮動塌陷。
(6)鼠標移動到所有超鏈接時動態效果：背景藍色，字體淺灰色，20PX。
這里使用了動態偽類選擇器hover：
#top-nav ul li a:hover {
color: #ccc;
background-color: #036;
font-size: 20px;
}
動態偽類包含兩種：
（1）在鏈接中常看到的錨點偽類
（2）為用戶行為偽類
（3）錨點偽類設置遵循【愛恨原則LoVe/HAte】，即link->visited->hover->active
(7)當鼠標移動到第三個菜單“分行特色”時子菜單的自動打開（仍然使用動態偽類選擇器：
#top-nav ul li:hover ul {
display: block;
}
(8)給列表項加一個右邊框
(9)把最后那個右邊框去掉，使用結構偽類選擇器
#top-nav ul li:first-child {
border-left-style: none;
}
結構偽類選擇器，是針對HTML層次“結構”的偽類選擇器。例如我們想要某一個父元素下面的第n個子元素
(10)動態效果：
#top-nav ul li a:hover {
color: #ccc;
background-color: #036;
font-size: 20px;
transition:all 1s ease-in ;
}
HTML代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>第七周導航條</title>
<style type="text/css">
</style>
<link href="1012.css" rel="stylesheet" type="text/css">
</head>
<body style="background-color:#0C6">
<div id="top-nav">
<ul>
<li> <a href="#">首 頁</a></li>
<li ><a href="#">服務公告</a> </li>
<li ><a href="#" id="b-nav">分行特色»</a>
<ul >
<li ><a href="#">學生時代</a></li>
<li ><a href="#">職場生涯</a></li>
<li ><a href="#">品質家庭</a></li>
<li ><a href="#">養老保障</a></li>
</ul>
</li>
<li ><a href="#">關於分行 </a> </li>
</ul>
</div>
</body>
</html>
CSS代碼：
@charset "utf-8";
* {
margin: 0;
padding: 0;
}
#top-nav {
margin: auto;
width: 1000px;
background-color: #999;
height: 40px;
}
#top-nav ul li {
line-height: 40px;
text-align: center;
float: left;
height: 40px;
width: 120px;
list-style-type: none;
border-left-width: 2px;
border-left-style: dashed;
border-left-color: #0CC;
}
#top-nav ul li a {
color: blue;
text-decoration: none;
}
#top-nav ul li ul {
display: none;
}
#top-nav ul li a:hover {
color: #ccc;
background-color: #036;
font-size: 20px;
transition:all 0.5s ease-in ;
}
#top-nav ul li:hover ul {
display: block;
}
#top-nav ul li:first-child {
border-left-style: none;
}
#top-nav ul li ul li {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
/* CSS Document */
課后作業
<nav> <ul class="menu"> <li><a href="index.html">Home</a></li> <li><a href="about.html">About Us</a></li> <li><a href="#gallery">Gallery</a></li> <li> <a href="#">Dropdown </a> <ul> <li><a href="#new" class="drop-text">New Collections</a></li> <li><a href="blog.html" class="drop-text">Blog</a></li> <li><a href="single.html" class="drop-text">Single Page</a></li> <li><a href="#newsletter" class="drop-text">Newsletter</a></li> </ul> </li> <li><a href="contact.html">Contact Us</a></li> </ul> </nav>