制作Drop down Menu

（Click 来看实验成果）

有没有看过这样的菜单?Yo!你一定有看过的啦。就，我的鼠标一指向上面的字，它就会开出更多的格子给你点击。我们称它为延展式菜单。这样的菜单是用来分类你部落格太多的东西，或者是你喜欢把东西分类得整整齐齐。我今天就教大家做这个吧:) Here we go!

1. 首先, 你需要先（Backup）备份你的部落格先哦。我不担保它会不会对你的部落格有效。不过，我的实验室实验成果是成功的。

2.Backup 好了bor? 现在我们要开工了! 现在去你的模板(Template) 开编辑HTML (Edit HTML)，用Ctrl + F 找 ]]></b:skin>, 不懂用Ctrl + F 的话，请click 这里。

3. 找到了吗? 找到了的话，就把以下的东西Copy在]]></b:skin>的上面。以下的东西做莫有颜色的或有Highlight的，别担心，我要教你换你喜欢的颜色啊:D 
要Copy的东西：

/*----- MBT Drop Down Menu ----*/

#mbtnavbar { 

    background: #060505; 

    width: 960px; 

    color: #FFF; 

        margin: 0px; 

        padding: 0; 

        position: relative; 

        border-top:0px solid #960100; 

        height:35px;

}

#mbtnav { 

    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:35px; 

} 

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

    color: #FFF; 

    display: block; 

   font:normal 12px Helvetica, sans-serif;    margin: 0; 

    padding: 9px 12px 10px 12px; 

        text-decoration: none; 

        

} 

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

    background: #BF0100; 

    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: 160px; 

    margin: 0; 

    padding: 0; 

} 

#mbtnav li ul a { 

    width: 140px; 

} 

#mbtnav li ul ul { 

    margin: -25px 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: #BF0100; 

    width: 120px; 

    color: #FFF; 

    display: block; 

    font:normal 12px Helvetica, 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; 

}

4. 你可以改变刚才你Paste长长的东西也就是第三个步骤的。

黄色Highlight的，可以换去你喜欢的颜色，字体的款式还有字体的大小。
#060505 ，换成你要的Main menu的背景颜色代码。
#BF0100，换成你要的Main menu的背景颜色代码当鼠标指向它时。
#BF0100，换成你要往下开的Drop down menu的背景颜色代码。
#060505，换成被你点击的Drop down menu 格子的背景颜色代码
960px;，换成你想要整个Menu的的宽度。


换好好，记得按预览(Preview) 看看，看得到你的部落格，就可以按保存(Save)了:D 可是还没完的哦，还有东西要弄，请看第5个步骤。

5. 是不是很简单? 可是还没好哦! 做事总要一步一步慢慢来的啊:)
现在关掉那个编辑HTML，去开布局（Layout），然后挑一个空的格子，按添加小工具(Add on a gadjet)。按了吗? 然后你去选HTML/ JavaScript，可以么?

↓下面的图片请看下面的指示，谢谢。

6. 按了，它是不是跳出一个框框。Ok, 别怕！ 你把以下的东西Copy 在那个大框框里面。不用写标题(Tittle)，嫑假厉害哦 :P 

要Copy 的东西：


<div id='mbtnavbar'> 
      <ul id='mbtnav'> 
        <li> 
          <a href='网址'>第一个格子的名字</a> 
        </li> 
        <li> 
          <a href='网址'>第二个格子的名字</a> 
       </li> 
        <li> 
          <a href='网址'>第三个格子的名字</a> 
        </li> 
  <li> 
           <a href='网址'>第四个格子的名字</a>
            <ul> 
                <li><a href='网址'>开始Under下拉菜单的第一个名字</a></li> 
                <li><a href='网址'>第二个名字了</a></li> 
                <li><a href='网址'>第三个名字了</a></li> 
              </ul> 
        </li>
      </ul> 
    </div>

看到黄色Highlight 有没有，它就是可以让你有Drop down Menu的东西出现。就你要在哪里的就Copy paste 多加那个就行了。不过醒目一点，记得改网址和你要呈现的名字。

如果要多加横的Menu格子，而不是向下拉的，则多Copy paste 下面的东西，然后加在上面的Code里。
<li>

          <a href='网址'>展示的名字</a>
        </li>


尾声： 你做到了吗? 做到请按保存(Save)，若你成功了! 恭喜，你也太棒了。做不到的，别灰心，不妨参考其他博主写的教程=) 加油!


Written by,