如何添加多层次的MENU

这个我不是很会哦>_<
我把我试过了的先写出来...
以免自己忘记T^T

步骤1

到以下的网站哦^^
Dropdown Menu CSS Generator


然后就会出现如以下图的东西^^

然后你们就到那里去设置下你的MENU BAR吧^^

设置好了就到先看看你们设置好了的结果^^

1 ： 设置好了就按Submit Design
2 ： 这个部分是浏览里面刚才设置的结果

满意了后就到下面的CCS CODE那里复制里面的代码^^

诶～再然后咧......

去到部落格 > 设计 > 先把你们原本的HTML复制起来 > 修改HTML > 找出以下的代码
记得要复制啊啊!!!!不然等下出什么问题不要怪我哦>_<

]]></b:skin>

然后把你刚才复制的代码放在它的上面


再继续找出以下的代码

/*Tabs

找到后把/*Tabs和/* Headings之间的代码统统删掉!!!
参考以下的图^^

箭头指着的地方本来有很多代码的
你们要把它删除掉!!!
删除那么多，怕会有问题？？
所以咯～我才叫你们保存你们的HTML

好了后就保存模板!!

步骤2

设计 > 页面元素 > 添加小工具 > +HTML/JavaScript

把以下全部代码贴进去就对了^^

<!--[if lte IE 7]>

<script type="text/javascript" src="http://pixopoint.com/wp-content/plugins/pixopoint-menu/scripts/suckerfish_ie.js"></script>

<![endif]-->

<ul id="suckerfishnav" class="sf-menu">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a>
    <ul>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
    </ul>
  </li>
  <li><a href="#">Link 3</a>
    <ul>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
    </ul>
  </li>
  <li><a href="#">Link 4</a>
    <ul>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
    </ul>
  </li>
</ul> 

NOTES:
* = 你们的链接
Link =上端Menu的标题
Sub Link =Drop down menu的标题



如果要在第一个LINK加Drop Down Menu的话

就把以下的代码后面的<li>删除掉

<li><a href="#">Link 1</a></li>

然后在他的下面添加以下的代码

<ul>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
    </ul>
  </li>

这样就可以了^^

好了后就去保存^^

可以去看看有没有效果了^^

如果没有的话，我真的帮不到你了>_<
如果成功的话，可以会有点问题出现在Menu Bar那里哦～～

你们注意看下
就是说你的箭头还没指到它所有的drop down的Menu时就不见了,
你们的会吗？？


如果会的话就继续

步骤3

去修改HTML那里找出以下的代码

position:absolute;

然后在他的后面加上这个代码

z-index:100;

加了后就是这样

position:absolute;z-index:100;

保存模板就可以了^^


等等......

可能你们的Drop Down Menu 会盖着你们其他的POST之类的
参考以下的图^^

可以在刚才添加小工具那里你们贴下去的代码最后面添加

<br><br>

让它隔一段距离

就这样大功告成了^^


我知道你们一定会问：

> 怎样把背景换成图案？
目前我还不知道，如果你们要试看的话，可以到刚才你们添加小工具那里把LINK的字眼改去<img style="width: 108px; height: 58px;" src="IMAGE LINK"

> 怎样把整个MENU BAR放在中间？？
我也在试着咧T^T还找不到解决的方法T^T

就这样啦^^

如果你们有更加好的意见请留言吧^^