最近把《CSS實戰手冊：the missing manual》的基礎部分看得差不多了，也想實踐一下子。其實該從哪些部分開始下手實踐我也不知道，偶然看見“二級導航”這幾個字便趁空一試。
成果圖：
代碼在最下方。
大致思路：
使用嵌套列表，子菜單使用<li>標籤中的<ul>實現。
<ul class="nav">
<li class="menu"><a href="" class="menuLink">菜單一</a>
<ul class="submenu">
<li><a href="">子菜單一</a></li>
<li><a href="">子菜單二</a></li>
<li><a href="">子菜單三</a></li>
</ul>
</li>重點在於如何處理同一<li>元素中<ul>和<a>的關係，以及如何將所有單元中的主選項另外組合形成導航欄，因爲開始感覺畢竟是同一個<li>中的元素，總存在些依附關係。
不過我發現一個重要的法則是“從外到內”依次處理，也不斷將處理範圍縮小。所以首先將每個單元看做整體，此例中存在四個單元。此處的處理重點是，將主菜單選項和子菜單裝飾成相同的外觀，如果不處理的話就會有默認的表示等級關係的錯位，不過處理也簡單，消除margin就行。（反正我現在不管是咋回事先把margin和padding全清了嘻嘻）
【此處回憶一下導航欄要點：<a>設置成block，如需橫向導航欄將<li>設置成inline。】
現在將四個整齊的單元放在最外層的<ul>中來看，設置相互間的間距，然後使用text-align:center將<ul>於頁面居中。
將子菜單隱藏的要點就是display:none/block. 但是就算已經知道這一點，我還是面臨了兩個挫折。
1.如何使用:hover。如果不瞭解:hover的真正用法會很疑惑在不同元素關係下的使用方式，不過我在此處找到了解釋：css:hover狀態改變另一個元素樣式的使用
2.我最開始是使用padding之類的屬性來定位，後來也成功使得子菜單消失，但在其重新顯示時，其它主菜單選項都下墜了。後來我想應該是出現的子菜單將盒子向下撐大了，使得菜單選項墜到了底部。而且如果在這時加上:hover效果（產生border-bottom）會使得子菜單下降，因爲子菜單和主菜單選項之間又插入了幾個像素，把它給擠下去了...所以又重寫換成了相對和絕對定位。具體就是主菜單使用絕對定位，子菜單使用margin-top（這樣還可將border-bottom的幾像素空出來）. 此處也用上了很好用的>符號用以選擇第一級後代，可以幫助我把每個單元中的第一個<a>元素即主菜單選項提取出來絕對定位在導航欄的位置。（我突然發現好像不用提取？？？）
然後就成功了。
總結一下本次小小實踐的收穫：
b."從外到內"
c.其實margin和padding也給我造成了不小的麻煩。有時會因爲繼承造成奇怪的錯位，這時我就只能用border把每個元素框出來看是哪兒出現的問題。我覺得爲了更好地處理這樣的問題，手持設計稿定會相當有效。
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>fantasia</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<nav>
</nav>
<ul class="nav">
<li class="menu"><a href="" class="menuLink">菜單一</a>
<ul class="submenu">
<li><a href="">子菜單一</a></li>
<li><a href="">子菜單二</a></li>
<li><a href="">子菜單三</a></li>
</ul>
</li>
<li class="menu"><a href="" class="menuLink">菜單二</a>
<ul class="submenu">
<li><a href="">子菜單一</a></li>
<li><a href="">子菜單二</a></li>
<li><a href="">子菜單三</a></li>
</ul>
</li>
<li class="menu"><a href="" class="menuLink">菜單三</a>
<ul class="submenu">
<li><a href="">子菜單一</a></li>
<li><a href="">子菜單二</a></li>
<li><a href="">子菜單三</a></li>
</ul>
</li>
<li class="menu"><a href="" class="menuLink">菜單四</a>
<ul class="submenu">
<li><a href="">子菜單一</a></li>
<li><a href="">子菜單二</a></li>
<li><a href="">子菜單三</a></li>
</ul>
</li>
</ul>
</body>
</html>
CSS部分：
* {
box-sizing: border-box;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1.2;
}
ol {
padding-left: 1.4em;
list-style: decimal;
}
a{
text-decoration:none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ul, li{
padding:0;
margin:0;
}
/*以上是別處複製來的預處理*/
/*code begins*/
body{
background-color:#C4C4C4;
}
.nav{
width:100%;
height:50px;
background-color:#DDDDDD;
margin-top:50px;
box-shadow:0px 5px 5px #888888;
position:relative;
text-align:center;/*讓一級導航居中*/
}
.nav li{
list-style:none;
width:100px;/*無論一級還是二級*/
}
.nav>li{
display:inline-block;
/*border:1px solid black;*/
margin:0 50px;/*相當於每個單元的margin*/
}
.nav a{
display:block;
line-height:50px;
text-align:center;
/*border:1px solid black;*/
}
.nav ul{
position:absolute;
top:54px;
/*border:1px solid black;*/
display:none;
background-color:#DDDDDD;
}
.menu:hover ul.submenu{
display:block;
}
.menu a:hover{
color:#008B8B;
}
.menu>a:hover{
border-bottom:3px solid rgba(183, 56, 183, 1);
transition:border-bottom 0.8s;
}今天把代碼轉移到codepen時，發現一個不足，從主菜單滑到子菜單時如果碰到了中間預留給下劃線的縫隙會導致子菜單消失。
