[教學]在blogger建立下拉式導覽列

[教學]在blogger建立下拉式導覽列

在blogger加上導航列和高亮顯示當前頁面的導航列都會了，
那麼下拉式(階層式)導覽列又要怎麼做呢？無須用javascript或其他外掛，
僅需在CSS上定義blogger內建的標記值就可以輕鬆達成囉！
一樣請務必記得在實做以前儲存完整範本，以下，就來step by step吧！

• 首先，勾選展開小裝置範本→利用ctrl+F找到]]></b:skin>，
  在它前面加上下面這段程式碼(字體顏色不同的地方是圖片及色碼
  ，都可以依照自家版型需求隨意替換)：/* ----- NAV MENU ----- */
  #navMenu {
  width: 910px;
  height: 35px;
  background:#deb8b8url
  (https://ihbqkg.bay.livefilestore.com/
  y1p3aWC941BvpgFq8tPSKUpNp8l0MhmU7DAVl41DQ1BeKk8Z_
  u2q2zow8T3-QbOksv9mqdFZ-_Jb6407f99F_guWOiGUGOCWEUH/nav.gif) repeat-x top;
  color: #b56666;
  margin: 0 auto 0;
  padding: 0;
  font: bold 11px Century Gothic, Arial, Tahoma, Verdana;
  border-top: 1px solid #debeb8;
  border-bottom: 1px solid #FFFFFF;
  }
  #navMenuleft {
  width: 680px;
  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: #b56666;
  display: block;
  text-transform: capitalize;
  margin: 0;
  padding: 9px 15px 8px;
  font: normal 15px Century Gothic, Times New Roman;
  }
  #nav li a:hover, #nav li a:active {
  background:#deb8b8;
  color: #b56666;
  margin: 0;
  padding: 9px 15px 8px;
  text-decoration: none;
  }
  #nav li li a, #nav li li a:link, #nav li li a:visited {
  background:#deb8b8url
  (https://ihbqkg.bay.livefilestore.com/
  y1p3aWC941BvpgFq8tPSKUpNp8l0MhmU7DAVl41DQ1BeKk8Z_u2q2zow8T3-
  QbOksv9mqdFZ-_Jb6407f99F_guWOiGUGOCWEUH/nav.gif) repeat-x top;
  width: 150px;
  color: #000;
  text-transform: lowercase;
  float: none;
  margin: 0;
  padding: 7px 10px;
  border-bottom: 1px solid #deb8b8;
  border-left: 1px solid #deb8b8;
  border-right: 1px solid #deb8b8;
  font: normal 14px Century Gothic, Times New Roman;
  }
  
  #nav li li a:hover, #nav li li a:active {
  background: #deb8b8;
  color: #b56666;
  padding: 7px 10px;
  }
  #nav li {
  float: left;
  padding: 0;
  }
  #nav li ul {
  z-index: 9999;
  position: absolute;
  left: -999em;
  height: auto;
  width: 170px;
  margin: 0;
  padding: 0;
  }
  #nav li ul a {
  width: 140px;
  }
  #nav li ul ul {
  margin: -32px 0 0 171px;
  }
  #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;
  }
• 再找到下面這段程式碼，若找不到就掐頭去尾留中間找找看類似區段
  (例如ctrl+F搜尋自己部落格名稱)。

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='你的部落格名稱' type='Header'/>
</b:section>
</div>

• 在這段程式碼下方加上自訂義的下拉式導航列，
  不同顏色的標籤分屬不同階層(要幾層有幾層)：
• <div id='navMenu'>
  <div id='navMenuleft'>
  <ul id='nav'>
  <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
  <li><a href='欲連結網址'>News</a></li>
  <li><a href='欲連結網址'>Life</a>
  <ul>
  <li><a href='欲連結網址'>Parrot</a></li>
  <li><a href='欲連結網址'>Cosmetics</a></li>
  <li><a href='欲連結網址'>Internet</a></li>
  <li><a href='欲連結網址'>Travel</a>
  <ul>
  <li><a href='欲連結網址'>Backpacking</a></li>
  <li><a href='欲連結網址'>Tour</a></li>
  </ul>
  </li>
  </ul>
  </li>
  <li><a href='欲連結網址'>Tips and Trick</a></li>
  </ul>
  </div>
  </div> <!-- end nav -->
• 可以到「凱特實驗室http://katefortesting.blogspot.tw/」查看效果。
• http://www.acgxi.tk/2012/05/blogger_6840.html