Blogger 小技巧02－導覽列下拉選單

先簡易說明下拉選單的語法架構如下：

最上層 MenuItem，用 <li>...</li> 包住的內容，如下：
<li>
 <a href='https://roats1000.blogspot.com/'>Home Page</a>
</li>


其中 <li>...</li>，也可以去除超連結，如下：
<li>
 <a>ＴＥＳＴ０１２３</a>
</li>

加入第二層以後 MenuItem，要用最上層的 <li>...</li> 語法外，再加入 <ul>...</ul>，並且再 ul 標籤內加入同前面敘述的 <li>...</li>的架構，如下：
<li>
 <a>ＴＥＳＴ０１２３</a>
 <ul>
  <li><a href='網址1'>選單名稱1</a></li>
  <li><a href='網址2'>選單名稱2</a></li>
  <li><a href='網址3'>選單名稱3</a></li>
 </ul>
</li>

分成兩步驟執行：

步驟（一）

主題→編輯HTML，將以下的資料貼在 ]]></b:skin>  前面

/* ================== NAV MENU =================== */
/* MenuBar 導覽列下拉選單條整體外框設定第一步開始Start */
#navMenu {
 width: 1280px;
 height: 35px;
 margin: 0 auto 0;
 padding: 0;
 border-top: 1px solid #000000;
 border-bottom: 1px solid #000011;
 background:#222222 repeat-x top;
}

#navMenuleft {
 width: 1000px;
 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;
}

/* 主選單(最上層) Text 設定 */
#nav li a, #nav li a:link, #nav li a:visited {
 color: #aaaaaa;
 display: block;
 text-transform: capitalize;
 margin: 0;
 padding:8px 20px 8px;
 font: bold 15px Verdana, Arial;
}

/* 主選單(最上層)被選取時(selected)的設定 */
#nav li a:hover, #nav li a:active {
 background:#000000;
 color: #ff8800;
 margin: 0;
 text-decoration: none;
 padding:8px 20px 8px;
 font: bold 15px Verdana, Arial;
}

/* 子選單(第二層以後) 下拉選單外框設定 */
#nav li li a, #nav li li a:link, #nav li li a:visited {
 background:#222222 repeat-x top;
 width: 150px;
 color: #aaaaaa;
 //text-transform: lowercase;
 float: none;
 margin: 0;
 border-bottom: 1px solid #000000;
 border-left: 1px solid #000000;
 border-right: 1px solid #000000;
 padding: 7px 15px;
 font: normal 14px Verdana, Arial;
}

/* 子選單(第二層以後)被選取時(selected)的設定 */
#nav li li a:hover, #nav li li a:active {
 background: #000000;
 color: #ff8800;
 padding: 7px 15px;
 font: normal 14px Verdana, Arial;
}

#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;
}
/* MenuBar 導覽列下拉選單條整體外框設定第一步到此結束End */

步驟（二）

一樣在HTML中搜尋自己的部落格名稱

接著在底下   </b:section>
    </div>
的後方插入以下內容(個人的是在底下約80行處)

<!-- MenuBar 導覽列下拉選單條整體外框設定第二步開始Start -->
<div id='navMenu'>
<div id='navMenuleft'>
<ul id='nav'>

<li>
 <a expr:href='data:blog.homepageUrl'>Home</a>
</li>

<li>
 <a href='https://roats1000.blogspot.com/2020/02/blog-post.html'>About</a>
</li>

<li>
 <a href='網址'>Test01</a>
<!--
 <ul>
  <li><a href='網址1'>選單名稱1</a></li>
  <li><a href='網址2'>選單名稱2</a></li>
  <li><a href='網址3'>選單名稱3</a></li>
 </ul>

-->
</li>

<li>
 <a href='網址'>Test02</a>
</li>

<li>
 <a>Test03</a>
 <ul>
  <li><a href='網址1'>選單名稱1</a></li>
  <li><a href='網址2'>選單名稱2</a></li>
  <li><a href='網址3'>選單名稱3</a></li>
 </ul>
</li>

<li>
 <a>Test04</a>
 <ul>
  <li><a href='網址1'>Test04-1</a></li>
  <li>
   <a href='網址1'>Test04-2</a>
     <ul>
      <li><a href='網址1'>Test04-2-a</a></li>
      <li><a href='網址2'>Test04-2-b</a></li>
      <li><a href='網址3'>Test04-2-c</a></li>
     </ul>
  </li>
  <li><a href='網址1'>Test04-3</a></li>
 </ul>
</li>

<li>
 <a>Test05</a>
 <ul>
  <li><a href='網址1'>選單名稱1</a></li>
  <li><a href='網址2'>選單名稱2</a></li>
  <li><a href='網址3'>選單名稱3</a></li>
  <li><a href='網址4'>選單名稱4</a></li>
 </ul>

</li>

<!--
<li>
 <a href='https://reurl.cc/0ooXmk'>登入</a>
</li>
-->


</ul>
</div>

</div>

<!--  導覽列下拉選單條整體外框設定第二步結束End  -->

參考資料來源：

PM Linux 好好玩實驗室

凱特實驗室
純CSS的下拉式選單