電腦問題(0010) - 如何在 Blogger 上建立下拉式菜單 (Drop-down menu)?

問題 Question/Problem

如何在 Blogger (或 Blogspot) 上建立下拉式菜單?
How to make "drop-down menu" on blogger (or blogspot)?

解決方法 Solution

First of all, thanks to the author of the following web page:
首先感謝以下網頁的作者：
http://www.bitesizedthoughts.com/2013/02/how-to-create-drop-down-menus-in-blogger.html

Since some people who speak Chinese may not be able to read or fully understand the article in English, I translated/modified the code and explained the process into Chinese here. Thus, if this is not acceptable to the author, please let me know, so I can remove this page ASAP.
Thanks a lot in advance.

這裡把該網頁所寫的方式以中文來解說。完成後的網頁可以參考：
http://backpacking-from-taiwan.blogspot.com.au/

在以上範例中，品川跟彩虹大橋是位於景點及東京之下的選項。

製作方式如下：

1. 在 Blog 設計頁面的左側，選 Layout。
2. 在 Blog header 下，按 "add a gadget"。
3. 在出現的視窗中，往下找並選取 "HTML/Java Script"。
4. Title 可以不填，並在 Contents 的部分請複製下方的程式碼:

<div id='mbtnavbar'>
<ul id='mbtnav'>
  <li>
  <a href='連結到第一頁 (例如：本頁)’>本頁 </a>
  </li>
  <li>
  <a href='連結到第二頁 (例如：景點)’>景點 </a>
      <ul>
      <li><a href=’連結到第二頁的第一子網頁 (例如： 東京)'>東京</a>
      </li>
      <li><a href=’連結到第二頁的第二子網頁 (例如： 名古屋)'>名古屋</a>
      </li>
      <li><a href=’連結到第二頁的第三子網頁 (例如： 松本)'>松本</a>
      </li>
      </ul>
  </li>
  <li>
  <a href='連結到第三頁 (例如：交通)'>交通</a>
      <ul>
      <li><a href='連結到第三頁的第一子網頁 (例如： 東京)’>東京</a>
      </li>
      <li><a href='連結到第三頁的第一子網頁 (例如： 名古屋)’>名古屋</a>
      </li>
      <li><a href='連結到第三頁的第一子網頁 (例如： 高山)’>高山</a>
      </li>
      </ul>
  </li>
  <li>
  <a href='連結到第四頁 (例如：參考行程)’>參考行程 </a>
  </li>
</li></ul>
</div>

5. 將這個 gadget 儲存起來。此時，在 Layout 的頁面可以看到有一寫著 "HTML/Java Script" 的 (橫式)長塊 (位於 Header 之下)，就是您剛剛加入的。

6. 選 Template。點選 Customize 。
7. 在 Template 編輯頁面的左上角的選項中，點選最下方的 "Advanced"。
8. 在出現的選項的最下方點選 "Add CSS"。
9. 在右上方出現的文字方框中將以下的部分複製上去：

.Header h1 {text-shadow: 2px 2px #FFFFFF; }
/*----- MBT Drop Down Menu ----*/

#mbtnavbar {
/* background: #ff0000; */
width: 100%;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
height: 41px;
}

#mbtnav {
background: #909092;
margin: 0;
padding: 0;
}

#mbtnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}

#mbtnav li {
list-style: none;
margin: 0;
padding: 0;
/* border-left:1px solid #333;
border-right:1px solid #333; */
height:41px;
}

#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #FFF;
display: block;
font:bold 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}

#mbtnav li a:hover, #mbtnav li a:active {
background: #909092;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}

#mbtnav li {
float: left;
padding: 0;
}

#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 200px;
margin: 0;
padding: 0;
}

#mbtnav li ul a {
width: 180px;
}

#mbtnav li ul ul {
margin: -35px 0 0 161px;
}

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

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

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

#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #909092;
/* width: 140px; */
color: #FFF;
display: block;
font:bold 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}

#mbtnav li li a:hover, #mbtnavli li a:active {
background: #060505;
color: #FFF;
display: block;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}

.tabs-inner .widget #mbtnavbar li a {
border-left:none;
}

.tabs-outer .widget, .section {
margin:0;
}

.tabs-inner {
padding: 0px;
}

10. 點選右上方的 "Apply to Blog"。完成了！！