4.1下拉菜单使用制作教程帖

从SHL 3.8 开始 就有用户陆续反映不知如何制作动态的下拉导航菜单，于是乎，SHL官方响应群众要求，在最新的SHL4.1版本中加入了 main_menu 的扩展标签 main_menu_extend。

通过此标签你可以实现一些华丽的下拉菜单特效，就特效来说 狗头我向大家推荐 JQ 这个全世界都很流行的JS 框架，通过JQ 这款JS 框架可以实现一些极其华丽的特效，绝对不输FLASH 特效。。

好了，废话不多说，最近经常有很多坛友反映不知如何使用 main_menu_extend 这一标签。响应老大的号召，狗头我今天开一个教程帖，来给大家展示一个JQ 的下拉菜单制作的全过程。。 (说的不好 大家别喷哈~)

首先你需要制作一款静态HTML下拉菜单 如果不会的话那也没关系，网上别人制作好的也是一堆一堆的，找一款你满意的静态HTML 的下拉菜单嘛，狗头给大家推荐一个网站（嘿嘿，其实这还是灵魂告诉我的~）http://www.zcool.com.cn  站酷网， 里面真的有很多华丽的特效素材提供下载。

随便找一款吧...   http://www.zcool.com.cn/gfx/ZNzE5MDA=.html  就它了，感觉不错。。 （是不是很面熟啊~ 嘿嘿，对了，之前我发的3.8 版本的下拉菜单就是用这款做的演示）

好了，特效选好就需要把文件下载下来，下载完成后，打开后你会发现里面有两个文件夹 和一个名为jQure-menu.html 的 HTML 文档，这些文件就是组成这个下拉菜单的必须文件啦。

首先把JS 文件夹和 image 文件夹复制到你的模版根目录下， 然后用DW打开 jQure-menu.html  ，下面重头戏就是对这个文档的分析啦。。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>dufeng007.cn</title>
  6. <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  7. <script type=text/javascript>
  8. $(function(){
  9.         $('#webmenu li').hover(function(){
  10.                 $(this).children('ul').stop(true,true).show('slow');
  11.         },function(){
  12.                 $(this).children('ul').stop(true,true).hide('slow');
  13.         });
  14.         
  15.         $('#webmenu li').hover(function(){
  16.                 $(this).children('div').stop(true,true).show('slow');
  17.         },function(){
  18.                 $(this).children('div').stop(true,true).hide('slow');
  19.         });
  20. });
  21. </script>
  22. <style type="text/css">
  23. * {
  24.         margin:0;
  25.         padding:0;
  26. }
  27. body {
  28.         font-family:Arial, Verdana, Helvetica, sans-serif;
  29.         font-family:"雅黑宋体", "微软雅黑", "新宋体", "宋体";
  30.         font-size:1em;
  31.         font-size:17px;
  32.         color:#FFF;
  33.         background:#050505;
  34.         text-align:left;
  35. }
  36. a {
  37.         color:#FFF;
  38.         text-decoration:none;
  39. }
  40. ul {
  41.         list-style:none;
  42. }
  43. #webmenu {
  44.         height:37px;
  45.         background:#333;
  46.         font-size:1.3em;
  47.         text-align:center;
  48. }
  49. #webmenu a {
  50.         font-size:0.65em;
  51. }
  52. #webmenu li ul {
  53.         display:none;
  54. }
  55. #webmenu li ul li {
  56.         float:none;
  57. }
  58. *html #webmenu li ul li {
  59.         display:inline;
  60. }
  61. #webmenu li ul a {
  62.         float:none;
  63.         height:32px;
  64.         line-height:32px;
  65.         padding:0 10px;
  66.         text-transform:capitalize;
  67. }
  68. #webmenu .height-auto {
  69.         line-height:15px;
  70.         padding:5px 10px;
  71. }
  72. .second-menu, .third-menu, .fourth-menu {
  73.         position:absolute;
  74. }
  75. .first-menu li {
  76.         float:left;
  77.         position:relative;
  78. }
  79. .first-menu a {
  80.         float:left;
  81.         display:block;
  82.         padding:0 20px;
  83.         height:35px;
  84.         line-height:35px;
  85.         background:#333;
  86.         border-top:1px solid #4a4a4a;
  87.         border-left:1px solid #4a4a4a;
  88.         border-bottom:1px solid #242424;
  89.         border-right:1px solid #242424;
  90.         font-size:.7em;
  91. }
  92. .first-menu a:hover {
  93.         background:#4698ca;
  94.         border-top:1px solid #5db1e0;
  95.         border-left:1px solid #5db1e0;
  96. }
  97. .second-menu {
  98.         top:37px;
  99.         right:0;
  100. }
  101. *html .second-menu {
  102.         right:-1px;
  103. }
  104. .second-menu a {
  105.         font-size:11px;
  106. }
  107. .second-menu a.arrow {
  108.         background:#3a3a3a url(image/arrow.gif) no-repeat right top;
  109. }
  110. .second-menu a.arrow:hover {
  111.         background:#4698ca url(image/arrow.gif) no-repeat right -32px;
  112. }
  113. .second-menu a.arrow-02 {
  114.         background:#3a3a3a url(image/arrow.gif) no-repeat right -64px;
  115. }
  116. .second-menu a.arrow-02:hover {
  117.         background:#4698ca url(image/arrow.gif) no-repeat right -110px;
  118. }
  119. .third-menu, .fourth-menu {
  120.         width:177px;
  121.         top:0;
  122.         left:177px;
  123. }
  124. .third-menu a {
  125.         background:#4c4c4c;
  126.         font-weight:normal;
  127.         border-top:1px solid #595959;
  128.         border-left:1px solid #595959;
  129.         border-bottom:1px solid #333;
  130.         border-right:1px solid #333;
  131. }
  132. #subMgm {
  133.         width:177px;
  134. }
  135. #subMgm .third-menu {
  136.         left:177px;
  137. }
  138. #subMgm .fourth-menu {
  139.         left:177px;
  140. }
  141. #subMusic, #subNews {
  142.         width:177px;
  143. }
  144. </style>
  145. </head>
  146. <body>
  147. <ul id="webmenu" class="first-menu">
  148.   <li><a href="#" style="color:#ff0; background:none; border:none;" target="_self">网站大全</a></li>
  149.   <li><a href="#" target="_self">建立网站</a>
  150.     <ul style="display: none;" id="subMusic" class="second-menu">
  151.       <li><a href="#" class="arrow" target="_self">域名空间</a>
  152.         <ul class="third-menu">
  153.           <li><a href="http://www.fatcow.com/">fatcow</a></li>
  154.           <li><a href="http://www.justhost.com/">justhost</a></li>
  155.           <li><a href="http://www.ipower.com/">ipower</a></li>
  156.           <li><a href="http://www.inmotionhosting.com/">inmotion</a></li>
  157.           <li><a href="http://www.ixwebhosting.com/index.php/v2/pages.dspmain">ixweb</a></li>
  158.           <li><a href="http://www.supergreenhosting.com/">supergreen</a></li>
  159.           <li><a href="http://www.hostgator.com/">hostgator</a></li>
  160.           <li><a href="http://www.powweb.com/">powweb</a></li>
  161.           <li><a href="http://www.startlogic.com/">startlogic</a></li>
  162.           <li><a href="http://www.greengeeks.com/">greengeeks</a></li>
  163.         </ul>
  164.       </li>
  165.       <li><a href="#" class="arrow" target="_self">CSS 模版</a>
  166.         <ul class="third-menu">
  167.           <li><a href="http://www.mezzoblue.com/zengarden/alldesigns/">zengerden</a></li>
  168.           <li><a href="http://www.freecsstemplates.org/">freecsstemplates.org</a></li>
  169.           <li><a href="http://www.oswd.org/">oswd.org</a></li>
  170.           <li><a href="http://www.opendesigns.org/">opendesigns.org</a></li>
  171.           <li><a href="http://www.cssplay.co.uk/">cssplay</a></li>
  172.           <li><a href="http://www.studiopress.com/">studiopress</a></li>
  173.           <li><a href="http://www.styleshout.com/">styleshout</a></li>
  174.         </ul>
  175.       </li>
  176.       <li><a href="#" class="arrow" target="_self">CSS 学习</a>
  177.         <ul class="third-menu">
  178.           <li><a href="http://www.x-css.cn/">ken's blog</a></li>
  179.           <li><a href="http://www.ndoherty.com/portfolio/">ndoherty</a></li>
  180.           <li><a href="http://www.inlco.cn/">andy's blog</a></li>
  181.           <li><a href="http://www.cssplay.co.uk/">cssplay</a></li>
  182.         </ul>
  183.       </li>
  184.       <li><a href="#" class="arrow" target="_self">博客制作</a>
  185.         <ul class="third-menu">
  186.         </ul>
  187.       </li>
  188.       <li><a href="#" class="arrow" target="_self">素材下载</a>
  189.         <ul class="third-menu">
  190.           <li><a href="http://flashden.net/">flashden.net</a></li>
  191.           <li><a href="http://www.zcool.com.cn/">站酷</a></li>
  192.         </ul>
  193.       </li>
  194.       <li><a href="#" class="arrow" target="_self">管理维护</a>
  195.         <ul class="third-menu">
  196.           <li><a href="http://www.chinaz.com/">中国站长</a></li>
  197.           <li><a href="http://www.68design.net/Web-Guide/">网页设计师联盟</a></li>
  198.           <li><a href="http://www.blueidea.com/">蓝色理想</a></li>
  199.           <li><a href="http://homepage.yesky.com/">天极网页</a></li>
  200.           <li><a href="http://learning.artech.cn/">前沿教室</a></li>
  201.         </ul>
  202.       </li>
  203.     </ul>
  204.   </li>
  205.   <li><a href="#" target="_self">工作生活</a>
  206.     <ul id="subNews" class="second-menu">
  207.       <li><a href="#" class="arrow" target="_self">搜索</a>
  208.         <ul class="third-menu">
  209.           <li><a href="http://www.baidu.com/">百度</a></li>
  210.           <li><a href="http://www.google.cn/">Google</a></li>
  211.           <li><a href="http://dir.sogou.com/">搜狐</a></li>
  212.         </ul>
  213.       </li>
  214.       <li><a href="#" class="arrow" target="_self">新闻</a>
  215.         <ul class="third-menu">
  216.           <li><a href="http://www.sina.com.cn/">新浪</a></li>
  217.           <li><a href="http://www.qq.com/">腾讯</a></li>
  218.           <li><a href="http://www.sohu.com/">搜狐</a></li>
  219.           <li><a href="http://www.163.com/">网易</a></li>
  220.           <li><a href="http://www.ifeng.com/">凤凰网</a></li>
  221.         </ul>
  222.       </li>
  223.       <li><a href="#" class="arrow" target="_self">招聘</a>
  224.         <ul class="third-menu">
  225.           <li><a href="http://www.chinahr.com/index.htm">中华英才网</a></li>
  226.           <li><a href="http://www.51job.com/">前程无忧</a></li>
  227.           <li><a href="http://www.zhaopin.com/">智联招聘</a></li>
  228.           <li><a href="http://www.cjol.com/">中国人才热线</a></li>
  229.           <li><a href="http://www.01job.cn/">上海第一招聘</a></li>
  230.           <li><a href="http://www.528.com.cn/">528招聘网</a></li>
  231.           <li><a href="http://www.1010jz.com/">1010兼职网</a></li>
  232.         </ul>
  233.       </li>
  234.       <li><a href="#" class="arrow" target="_self">网赚</a>
  235.         <ul class="third-menu">
  236.           <li><a href="http://www.vikecn.com/">威客中国</a></li>
  237.         </ul>
  238.       </li>
  239.       <li><a href="#" class="arrow" target="_self">购物</a>
  240.         <ul class="third-menu">
  241.           <li><a href="#" class="arrow" target="_self">网站</a>
  242.             <ul class="fourth-menu">
  243.               <li><a href="http://www.taobao.com/">淘宝网</a></li>
  244.               <li><a href="http://www.dangdang.com/">当当网</a></li>
  245.               <li><a href="http://www.eachnet.com/">易趣网</a></li>
  246.               <li><a href="http://youa.baidu.com/">百度有啊</a></li>
  247.               <li><a href="http://www.amazon.cn/">卓越网</a></li>
  248.               <li><a href="http://www.paipai.com/">拍拍网</a></li>
  249.               <li><a href="http://china.alibaba.com/">阿里巴巴</a></li>
  250.               <li><a href="http://www.360buy.com/">京东商城</a></li>
  251.               <li><a href="http://www.gumzzi.com/">锦上添花女装</a></li>
  252.             </ul>
  253.           </li>
  254.           <li><a href="#" class="arrow" target="_self">快递公司</a>
  255.             <ul class="fourth-menu">
  256.               <li><a href="http://www.sto.cn/">申通快递</a></li>
  257.               <li><a href="http://www.yto.net.cn/">圆通快递</a></li>
  258.               <li><a href="http://www.ems.com.cn/">EMS特快专递</a></li>
  259.               <li><a href="http://www.sf-express.com/">顺丰快递</a></li>
  260.               <li><a href="http://www.ttkdex.com/">天天快递</a></li>
  261.               <li><a href="http://www.zto.cn/">中通快递</a></li>
  262.               <li><a href="http://www.yundaex.com/www/index.html">韵达快运</a></li>
  263.             </ul>
  264.           </li>
  265.           <li><a href="#" class="arrow" target="_self">电子支付</a>
  266.             <ul class="fourth-menu">
  267.               <li><a href="https://www.alipay.com/">支付宝</a></li>
  268.               <li><a href="https://www.99bill.com/">快钱</a></li>
  269.               <li><a href="https://www.tenpay.com/">财付通</a></li>
  270.               <li><a href="https://www.paypal.com/c2">paypal</a></li>
  271.               <li><a href="https://www.baifubao.com/">百付宝</a></li>
  272.             </ul>
  273.           </li>
  274.         </ul>
  275.       </li>
  276.       <li><a href="#" class="arrow" target="_self">科技</a>
  277.         <ul class="third-menu">
  278.           <li><a href="http://www.patent-cn.com/">专利之家</a></li>
  279.         </ul>
  280.       </li>
  281.     </ul>
  282.   </li>
  283.   <li><a href="#" class="arrow" target="_self">休闲娱乐</a>
  284.     <ul style="display: none;" id="subMgm" class="second-menu">
  285.       <li><a href="#" class="arrow" target="_self">游戏</a>
  286.         <ul class="third-menu">
  287.           <li><a href="#" class="arrow" target="_self">网络游戏</a>
  288.             <ul class="fourth-menu">
  289.               <li><a href="http://wow.163.com/">魔兽世界</a></li>
  290.               <li><a href="http://au.9you.com/web_v5/index_top.html">劲舞团</a></li>
  291.               <li><a href="http://popkart.tiancity.com/homepage/">跑跑卡丁车</a></li>
  292.               <li><a href="http://zt.ztgame.com/">征途</a></li>
  293.               <li><a href="http://wd.gyyx.cn/">问道</a></li>
  294.               <li><a href="http://ploy.bnb.sdo.com/20070904/web/flash.htm">泡泡堂</a></li>
  295.               <li><a href="http://rxjh.17game.com/">热血江湖</a></li>
  296.               <li><a href="http://www.fsjoy.com/">街头篮球</a></li>
  297.               <li><a href="http://xyq.163.com/">梦幻西游</a></li>
  298.               <li><a href="http://speed.qq.com/index.shtml">QQ飞车</a></li>
  299.               <li><a href="http://mxd.sdo.com/homepage.htm">冒险岛</a></li>
  300.               <li><a href="http://sh.xoyo.com/">水浒Q传</a></li>
  301.               <li><a href="http://cf.qq.com/">穿越火线</a></li>
  302.               <li><a href="http://tl.changyou.com/">天龙八部</a></li>
  303.               <li><a href="http://zhuxian.wanmei.com/">诛仙</a></li>
  304.               <li><a href="http://wulin2.wanmei.com/">武林外传</a></li>
  305.               <li><a href="http://world2.wanmei.com/">完美世界</a></li>
  306.               <li><a href="http://sf.17game.com/index.php">特种部队</a></li>
  307.               <li><a href="http://mir2.sdo.com/web/index.html">热血传奇</a></li>
  308.             </ul>
  309.           </li>
  310.           <li><a href="http://www.17173.com/">17173</a></li>
  311.         </ul>
  312.       </li>
  313.       <li><a href="#" class="arrow" target="_self">电影</a>
  314.         <ul class="third-menu">
  315.           <li><a href="http://www.xunlei.com/">迅雷看看</a></li>
  316.           <li><a href="http://www.gougou.com/">狗狗搜索</a></li>
  317.           <li><a href="http://www.verycd.com/">电驴下载</a></li>
  318.           <li><a href="http://www.80s.cn/">80s手机电影</a></li>
  319.         </ul>
  320.       </li>
  321.       <li><a href="#" class="arrow" target="_self">视频</a>
  322.         <ul class="third-menu">
  323.           <li><a href="http://www.youku.com/">优酷</a></li>
  324.           <li><a href="http://www.tudou.com/">土豆</a></li>
  325.           <li><a href="http://www.ku6.com/">酷6</a></li>
  326.           <li><a href="http://6.cn/">六间房</a></li>
  327.           <li><a href="http://www.56.com/">56</a></li>
  328.         </ul>
  329.       </li>
  330.       <li><a href="#" class="arrow" target="_self">音乐</a>
  331.         <ul class="third-menu">
  332.           <li><a href="http://mp3.baidu.com/">百度-MP3</a></li>
  333.           <li><a href="http://www.qq163.com/">QQ163</a></li>
  334.           <li><a href="http://www.1ting.com/">一听音乐</a></li>
  335.         </ul>
  336.       </li>
  337.     </ul>
  338.   </li>
  339.   <li><a href="http://dufeng007.cn/sample.html" class="arrow" target="_blank">我的网站</a></li>
  340. </ul>
  341. </body>
  342. </html>

复制代码打开文档之后我们会看到这个HTML 文档中 有很多代码。。 哎呀呀 真是看的眼花缭乱。。  那就删减一些吧。。

首先我们把CSS 提取出来，在模版文件夹中新建一个menu.css 把这段CSS 放入其中，然后模板的index.php 和common.php 中引入menu.css 。。 把JS 也提取出来 复制到JS 文件中，同样引入。。

这样之后一看，哇哈哈真爽~少了一大截。。 不过貌似还是很多样子啊！ 不方便分析，那就再删吧， 菜单不需要那么多，最多三级就可以了嘛，分析的话 那也只需要一段... 删呀删的， 留下最重要的一部分就OK了。。。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>dufeng007.cn</title>
  6. <script type="text/javascript" src="<?php echo get_skin_root()?>js/jquery-1.3.2.min.js"></script>
  7. </head>
  8. <body>
  9. <ul id="webmenu" class="first-menu">
  10.   <li><a href="#" style="color:#ff0; background:none; border:none;" target="_self">首页</a></li>
  11.   
  12.    <li><a href="#" target="_self">建立网站</a>
  13.     <ul id="subMusic" class="second-menu">
  14.       <li><a href="#" target="_self">域名空间</a>
  15.         <ul>
  16.           <li><a href="http://www.fatcow.com/">fatcow</a></li>
  17.         </ul>
  18.       </li>
  19.     </ul>
  20.   </li>
  22. </ul>
  23. </body>
  24. </html>

复制代码哈哈，这样一看的话，需要分析的代码就更少了。。真爽呀~~ 哦嗬嗬~

从以上代码段可以看出来，这个下拉菜单的结构就是

  1.    <li><a href="#" target="_self">建立网站</a>
  2.    <ul style="display: none;" id="subMusic" class="second-menu">
  3.       <li><a href="#" class="arrow" target="_self">域名空间</a>
  4.         <ul class="third-menu">
  5.           <li><a href="http://www.fatcow.com/">fatcow</a></li>
  6.         </ul>
  7.       </li>
  8.     </ul>
  9.   </li>

复制代码他的主结构也就是
<ul>
     <li>
     </li>
</ul>
的结构，而有子类的话也依葫芦画瓢
<ul>
     <li> // 第一层li
            <ul>
                <li>// 第二层li
               </li>
           </ul>
     </li>
</ul>
这样一看就简单明了啦...
接着我们打开官方对于main_menu_extend标签的标签说明，官方给出一个自带样式 正好也是
<ul>
     <li>
     </li>
</ul
的结构， 那就方便啦~ 直接套就成。。

官方给的标签是

  1. main_menu_extend('<ul>||</ul>', '<li>||</li>','<li>||</li>')

复制代码参照这个标签说明，我们再对比下结构大致就能了解到这几个参数的意思.. 

第一个<ul>||</ul> 不用说啦，肯定就代表了 结构里面的ul  的意思。
另外两个li   那也就是代表了 结构里面的两个li ... 
根据官方的标 签说明，我们能知道 第二个参数代表了 第一层的li  。。第三个参数代表了 第二层的 li。。

参照这个标签，对比下结构，于是我们就可以得到一个标签

  1. <?php main_menu_extend('<ul id="subMusic" class="second-menu">||</ul>','<li>||</li>','<li>||</li>'); ?>

复制代码UL 中的 style="display: none;"  可以写到CSS 中，在这里就不需要加入了。。 
好啦，用此标签调用出来的应该是没错的。。但是这样还不够。。

从结构上来看，我们找的下拉菜单结构中ul 分为好几个种类.. 二级的class 是second-menu 三级的却是 third-menu  ，这可不行呀..  标签只提供了一个ul 参数，那怎么办呢..  很简单.. 改CSS ！

我们只需要一个second-menu  的class 其他什么三级  四级 菜单，全部换掉，比如CSS 中的 .third-menu 标识，我们就可以替换成 .second-menu li ul， 经此替换处理等等操作之后，我们能够得到menu.css 中的文件 就是

  1. * {
  2.         margin:0;
  3.         padding:0;
  4. }
  5. body {
  6.         font-family:Arial, Verdana, Helvetica, sans-serif;
  7.         font-family:"雅黑宋体", "微软雅黑", "新宋体", "宋体";
  8.         font-size:1em;
  9.         font-size:17px;
  10.         color:#FFF;
  11.         background:#050505;
  12.         text-align:left;
  13. }
  14. a {
  15.         color:#FFF;
  16.         text-decoration:none;
  17. }
  18. ul {
  19.         list-style:none;
  20. }
  21. #webmenu {
  22.         height:37px;
  23.         background:#333;
  24.         font-size:1.3em;
  25.         text-align:center;
  26. }
  27. #webmenu a {
  28.         font-size:0.65em;
  29. }
  30. #webmenu li ul {
  31.         display:none;
  32. }
  33. #webmenu li ul li {
  34.         float:none;
  35. }
  36. *html #webmenu li ul li {
  37.         display:inline;
  38. }
  39. #webmenu li ul a {
  40.         float:none;
  41.         height:32px;
  42.         line-height:32px;
  43.         padding:0 10px;
  44.         text-transform:capitalize;
  45. }
  46. #webmenu .height-auto {
  47.         line-height:15px;
  48.         padding:5px 10px;
  49. }
  50. .second-menu{
  51.         position:absolute;
  52. }
  53. .first-menu li {
  54.         float:left;
  55.         position:relative;
  56. }
  57. .first-menu a {
  58.         float:left;
  59.         display:block;
  60.         padding:0 20px;
  61.         height:35px;
  62.         line-height:35px;
  63.         background:#333;
  64.         border-top:1px solid #4a4a4a;
  65.         border-left:1px solid #4a4a4a;
  66.         border-bottom:1px solid #242424;
  67.         border-right:1px solid #242424;
  68.         font-size:.7em;
  69. }
  70. .first-menu a:hover {
  71.         background:#4698ca;
  72.         border-top:1px solid #5db1e0;
  73.         border-left:1px solid #5db1e0;
  74. }
  75. .second-menu {
  76.         display: none;
  77.         top:37px;
  78.         right:0;
  79. }
  80. *html .second-menu {
  81.         right:-1px;
  82. }
  83. .second-menu a {
  84.         font-size:11px;
  85. }
  86. .second-menu a.arrow {
  87.         background:#3a3a3a url(image/arrow.gif) no-repeat right top;
  88. }
  89. .second-menu a.arrow:hover {
  90.         background:#4698ca url(image/arrow.gif) no-repeat right -32px;
  91. }
  92. .second-menu a.arrow-02 {
  93.         background:#3a3a3a url(image/arrow.gif) no-repeat right -64px;
  94. }
  95. .second-menu a.arrow-02:hover {
  96.         background:#4698ca url(image/arrow.gif) no-repeat right -110px;
  97. }
  98. .second-menu li ul, .fourth-menu {
  99.         width:177px;
  100.         top:0;
  101.         left:177px;
  102. }
  103. .second-menu li ul a {
  104.         background:#4c4c4c;
  105.         font-weight:normal;
  106.         border-top:1px solid #595959;
  107.         border-left:1px solid #595959;
  108.         border-bottom:1px solid #333;
  109.         border-right:1px solid #333;
  110. }
  111. #subMgm {
  112.         width:177px;
  113. }
  114. #subMgm .second-menu li ul {
  115.         left:177px;
  116. }
  117. #subMgm .fourth-menu {
  118.         left:177px;
  119. }
  120. #subMusic, #subNews {
  121.         width:177px;
  122. }

复制代码大功告成~好了，下面总结一下，
第一步： 把JS 和图片复制到模版中，第二步 分析代码得出标签，第三步 把标签复制到index.php 和common.php 中的适当位置。。。

好了...  如此一番累死累活的操作之后，我们的华丽丽的下拉菜单就完成啦~ 而且还支持3级 4级。。无限级哦~ 好好欣赏一下吧。。

posted @ 2012-05-22 16:20  迷惘的云  阅读(340)  评论(0)  编辑  收藏  举报