<!DOCTYPE html>
<html>
<head>
<meta charset="UTF8">
<style>
body {
margin: ;
}
nav {
font-size: px;
/* 由于其下的菜單元素都是float的,如果不設定其width和position:relative,當寬度不夠時,會變到下一行去 */
min-width: px;
width: %;
position: relative;
/* 由于其子元素全是absolute或float,是以其檢測不到子元素高度,是以它的高度将被設為0,是以需要手動設定其height */
height: px;
background-color: #444;
}
nav dl {
/* 去掉清單的上邊界 */
margin: ;
}
/* 所有導航欄 */
nav dd {
/* dd或者li的左邊距都是margin造成的*/
margin: ;
width: px;
text-align: center;
background-color: #444;
}
nav a {
/* inline-block不會換行,block會自動換行,但是後面接了一個float是以都一樣
另外沒有display:block或者display:inline-block的話padding不會生效;
*/
display: inline-block;
/* 設定父元素的高度無法使其垂直居中,是以隻能通過line-height或padding或margin來實作 */
line-height: px;
color: white;
text-decoration: none;
}
nav>dl {
position: absolute;
}
nav>dl>dd {
/* float和position:absolute的作用一樣*/
float: left;
border-left: px solid black;
}
nav>dl>dd:last-child {
border-right: px solid black;
}
/* '>'表示前一個元素是後一個元素的父元素 */
nav>dl>dd:hover {
background-color: black;
}
nav>dl>dd:hover>a {
font-weight: bold;
}
/* 二級導航欄 */
nav>dl>dd>dl>dd {
background-color: #555;
/*border: none;*/
}
nav>dl>dd>dl>dd:hover {
background-color: #600;
font-weight: bold;
}
nav>dl>dd>dl {
display: none;
/* 這裡不能做height的動畫,因為并不能用height:100%,隻能用具體的height像素值
transition: height 5s;
height: 0px;
overflow: hidden;
*/
}
nav>dl>dd:hover>dl {
/* 隻有當滑鼠移到該清單項時,該項的子清單才顯示 */
display: block;
}
main {
/* 這裡要清空float屬性,否則正文部分會還是環繞布局 */
clear: left;
padding: px;
}
</style>
</head>
<body>
<header>
<nav>
<dl>
<dd><a href="#">網頁前端程式設計語言</a>
<dl>
<dd><a href="#">HTML5</a></dd>
<dd><a href="#">CSS3</a></dd>
<dd><a href="#">Javascript</a></dd>
</dl>
</dd>
<dd><a href="#">網頁前端程式設計架構</a>
<dl>
<dd><a href="#">Less</a></dd>
<dd><a href="#">Sass</a></dd>
<dd><a href="#">Bootstrap</a></dd>
<dd><a href="#">jQuery</a></dd>
<dd><a href="#">jQuery UI</a></dd>
<dd><a href="#">jQuery EasyUI</a></dd>
<dd><a href="#">AngularJS</a></dd>
<dd><a href="#">Vue.js</a></dd>
</dl>
</dd>
<dd><a href="#">網頁後端程式設計語言</a>
<dl>
<dd><a href="#">PHP</a></dd>
<dd><a href="#">ASP.NET</a></dd>
<dd><a href="#">JSP</a></dd>
<dd><a href="#">Ruby</a></dd>
<dd><a href="#">Node.js</a></dd>
<dd><a href="#">Dart</a></dd>
<dd><a href="#">Django</a></dd>
<dd><a href="#">Docker</a></dd>
</dl>
</dd>
<dd><a href="#">手機程式設計語言</a>
<dl>
<dd><a href="#">Objective-C</a></dd>
<dd><a href="#">Swift</a></dd>
<dd><a href="#">Android</a></dd>
<dd><a href="#">jQuery Mobile</a></dd>
<dd><a href="#">ionic</a></dd>
<dd><a href="#">PhoneGap</a></dd>
</dl>
</dd>
<dd><a href="#">PC端程式設計語言</a>
<dl>
<dd><a href="#">Java</a></dd>
<dd><a href="#">C</a></dd>
<dd><a href="#">C++</a></dd>
<dd><a href="#">C#</a></dd>
<dd><a href="#">Visual Basic .NET</a></dd>
<dd><a href="#">Assembly language</a></dd>
<dd><a href="#">Qt</a></dd>
<dd><a href="#">Go</a></dd>
<dd><a href="#">Delphi</a></dd>
<dd><a href="#">Visual Basic</a></dd>
</dl>
</dd>
<dd><a href="#">資料庫程式設計語言</a>
<dl>
<dd><a href="#">Oracle</a></dd>
<dd><a href="#">MySQL</a></dd>
<dd><a href="#">mariadb</a></dd>
<dd><a href="#">SQLite</a></dd>
<dd><a href="#">MongoDB</a></dd>
<dd><a href="#">IndexDB</a></dd>
</dl>
</dd>
<dd><a href="#">統計分析語言</a>
<dl>
<dd><a href="#">Python</a></dd>
<dd><a href="#">Perl</a></dd>
<dd><a href="#">R</a></dd>
<dd><a href="#">MATLAB</a></dd>
</dl>
</dd>
</dl>
</nav>
</header>
<main>
<article>
<p>導航欄是指位于頁眉區域的，在頁眉橫幅圖檔上邊或下邊的一排水準導航按鈕，它起着連結部落格的各個頁面的作用。</p>
<h4>應用範圍:</h4>
<p>通常情況下，<a href="http://baike.baidu.com/view/23618.htm" target="_blank">wordpress<sup>[1]</sup></a> 平台主題裡的導航欄是不允許将其連結任意定制成其它連結的，但是每當你撰寫了一個新頁面，導航欄就會自動多出一個連結指向該頁面的按鈕。
一般都是使用在WEB網站中，例如百度眉頁上面的一些選項"新聞，網頁，MP3，知道…"等就是導航欄的一種範例。
網站使用導航欄是為了讓通路者更清晰明朗的找到所需要的資源區域，尋找資源。</p>
</article>
</main>
</body>
</html>
要想添加下拉動畫，隻需要在CSS的最後添加如下代碼
/* 要想制作拉下動畫由于不知道dl的高度，那麼就隻能變換dd的高度了 */
nav>dl>dd>dl {
display: block;
}
nav>dl>dd>dl>dd {
transition: height s;
height: px;
}
nav>dl>dd:hover>dl>dd {
height: px;
}
![關于:first-child的誤區[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)