下拉導覽列製作

Google Blogger提供的「網頁」清單功能，基本上已可滿足網頁主題十頁以內的網頁連結清單，若要更上一層地分類分級呈現網頁，就要用到「下拉式導覽列」程式。
請到「主題」／「編輯HTML」／「跳至小工具」／「Header1」之中新增以下程式：

    <div id='navMenu'>
    <div id='navMenuleft'>
    <ul id='nav'>
      <li><a href='https://feiduen.blogspot.com/'>Home</a></li>
      <li><a>關於惇惇</a>
          <ul>
            <li><a href='http://feiduen.blogspot.com/2018/08/blog-post_21.html'>About Me</a></li>
            <li><a href='http://feiduen.blogspot.com/2018/08/my-sport.html'>My Sport</a>
<ul><li><a href='https://www.facebook.com/'>Nothing</a></li></ul>
      </li>
      </ul>
      </li>
  <li><a>網頁設計</a>
          <ul>
            <li><a href='http://feiduen.blogspot.com/p/httpswww.html'>基本觀念</a></li>
            <li><a href='http://feiduen.blogspot.com/p/google-blogger.html'>Google Blog</a>
<ul><li><a href='https://www.facebook.com/'>Nothing</a></li></ul>
      </li>
      </ul>
      </li>
      </ul>
    </div>
    </div>


程式解析:
導覽列選項的結構主要由

• <li> 、 </li> 
• <a> 、 </a>
• <ul> 、 </ul>

所組成
這些都是兩個一組，像是漢堡的麵包
如範例:<li><a href='https://feiduen.blogspot.com/'>Home</a></li>
可寫成
<li>
    <a href='https://feiduen.blogspot.com/'>
        Home
    </a>
</li>
這樣就是表示一個名為Home且連結為https://feiduen.blogspot.com/的導覽列選項

而<ul>表示的就是下一層的選項
如範例:
<li>
    <a>關於惇惇
    </a>
        <ul>
            <li><a http://feiduen.blogspot.com/2018/08/blog-post_21.html'>About Me</a></li>
        </ul>
</li>
其中<ul>、</ul>是加在</a>和</li>之間
這程式的意思就是選項About Me在選項關於惇惇裡面
而這擴充的子層是可以不斷擴充的
範例程式中擴充了兩次

了解程式的原理之後就可以隨自己需要修改程式囉!

等等，還沒完，還需將下拉式導覽列的格式程式貼在自訂CSS裡面，

請到「主題」／「自訂」／「進階」／「新增CSS」中增加以下程式：

/* NAV MENU---------------------------------------------- */
#navMenu {
width: 910px;
height: 35px;
background:#deb8b8 url(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:#deb8b8 url(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;

}