Blogger 建立下拉式多層選單導覽列
Blogger 筆記：建立下拉式多層選單導覽列。

前篇文章介紹使用小工具建立 Blogger 網頁導覽列，其優點是能簡單完成，缺點是看起來比較陽春，又無法分類整理各項連結，當連結數量過多時導覽列反而影響訪客瀏覽。想要改善這些缺點，可使用多層選單。


多數網站會使用多層下拉式導覽列，當滑鼠經過標籤文字時，自動展開下拉選單，將連結分類整理在下層選單，版面相對簡潔方便訪客瀏覽網站內容。網路搜尋可找到建立 Blogger 下拉選單教學，需修改 HTML 將 CSS 與 HTML 程式碼添加到版型。

操作說明：

Blogger 管理後台「主題」→「編輯 HTML」，建議先備份範本(備份說明)
Blogger 建立下拉式多層選單導覽列

尋找關鍵字『]]></b:skin> 』，在上方增加選單樣式(CSS)程式碼。
Blogger 建立下拉式多層選單導覽列

點選「跳至小工具」→「Header1」。
Blogger 建立下拉式多層選單導覽列

在網誌名稱(標頭)這段程式碼結束的『</div> 』下方增加選單連結(HTML)程式碼。
Blogger 建立下拉式多層選單導覽列

網頁複製程式碼不方便，下載純文字檔案：【MediaFire】

選單樣式 CSS 程式碼：
/* Blogger 下拉選單 CSS */

#navMenu {

width: 960px; /* 外框寬度 */

height: 44px; /* 外框高度 */

margin: 0 auto 0;

padding: 0;

border-top: 1px solid #9a9a9a;/* 外框線條 */

border-bottom: 1px solid #9a9a9a;

border-left: 1px solid #9a9a9a;

border-right: 1px solid #9a9a9a;

background:#4899a0; repeat-x top;/* 背景顏色 */

}



#navMenuleft {

width: 960px;

float: left;

margin: 0;

padding: 0;

}



#nav {

margin: 0;

padding: 0;

}



#nav ul {

float: left;

list-style: none;

margin: 0;

padding: 0;

}



#nav li {

list-style: none;

margin: 0;

padding: 0;

}



/* 第一層選單設定 */

#nav li a, #nav li a:link, #nav li a:visited {

color: #000000;

display: block;

text-transform: capitalize;

margin: 0;　　　　　　/* 邊緣外距離 */

padding:8px 16px 8px;/* 邊緣內距離 */

font: bold 20px 'Microsoft JhengHei';/* 字型 :粗體 大小 字體 */

}



/* 第一層選單(選取時)設定 */

#nav li a:hover, #nav li a:active {

background:#6a6a6a;

color: #ffffff;

margin: 0;

text-decoration: none;

padding:8px 16px 8px;

font: bold 20px 'Microsoft JhengHei';

}



/* 第二層選單(子選單)設定 */

#nav li li a, #nav li li a:link, #nav li li a:visited {

background:#4899a0; repeat-x top;

width: 120px;

color: #00000;

//text-transform: lowercase;

float: none;

margin: 0;

border-bottom: 1px solid #9a9a9a; /*外框線條 */

border-left: 1px solid #9a9a9a;

border-right: 1px solid #9a9a9a;

padding: 8px 15px;

font: bold 16px 'Microsoft JhengHei';

}



/* 第二層選單(子選單選取時)設定 */

#nav li li a:hover, #nav li li a:active {

background: #6a6a6a;                 /* 背景顏色 */

color: #ffffff;                      /* 文字顏色 */

padding: 8px 15px;

font: bold 18px 'Microsoft JhengHei';/* 字型 :粗體 大小 字體 */

}

#nav li {

float: left;

padding: 0;

}



#nav li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 150px;

margin: 0;

padding: 0;

}



#nav li ul a {width: 150px;}



#nav li ul ul {margin: -32px 0 0 180px;}



#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav  li.sfhover ul ul ul {left: -999em;}



#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto;}



#nav li:hover, #nav li.sfhover {position: static;}


程式碼中的幾行參數可自行調整，讓選單效果符合 Blogger 版型。
width: 960px; /* 外框寬度 */

height: 44px; /* 外框高度 */

margin: 0;　　　　　　/* 邊緣外距離 */

padding:8px 16px 8px;/* 邊緣內距離 */

border-top: 1px solid #9a9a9a;　　/* 外框線條 */

border-bottom: 1px solid #9a9a9a;

border-left: 1px solid #9a9a9a;

border-right: 1px solid #9a9a9a;

color: #ffffff;                  /* 文字顏色 */

background:#4899a0; repeat-x top;/* 背景顏色 */

font: bold 20px 'Microsoft JhengHei';/* 字型 */

選單連結 HTML 程式碼：
<div id='navMenu'>

<div id='navMenuleft'>

<ul id='nav'>



<li> <!-- 第一層-->

<a href='連結網址'>顯示文字</a>

</li>



<li><a>LINE</a> <!-- 第一層-->

<ul> <!-- 第二層-->

<li><a href='http://www.xiaoyao.tw/'>手機登出</a></li>

<li><a href='連結網址'>顯示文字</a></li>

</ul>

</li>



</ul>

</div>

</div>

參考文章：
PM Linux 好好玩實驗室: 在Google Blogger 中建立下拉式選單