织梦二级下拉菜单

下载DEDECMS二级下拉菜单导航必需要JS文件jquery-xl.js。下载地址：http://pan.baidu.com/s/1eQH7EP8
将下载下来的jquery-xl.js通过FTP软件上传到DEDECMS程序根目录的images文件夹。
打开自己DEDECMS网站的头部文件head.htm，在代码顶部放上以下的代码，用于调用jquery-xl.js文件。

DEDECMS织梦网站下拉菜单导航

使用以下的代码替换原来调用导航菜单的代码，这个代码也是在head.htm中。（原来的代码只会调用一级菜单栏目）

<div class="base-nav">
  <ul id="ermeau" class="wrap clearfix">
    <li {dede:field name=typeid runphp="yes"}(@me=="")? @me=" class='current'":@me="";{/dede:field}><a href="/">网站首页</a></li>

        {dede:channelartlist row='9' typeid='top'}

        <li class="nLi"> <a {dede:field name='currentstyle'/} href="{dede:field name='typeurl'/}">{dede:field name='typename'/}</a>

           <ul class="sub">

            {dede:channel type='son' noself='yes'}

            <li> <a href="[field:typelink/]">[field:typename/]</a></li>

            {/dede:channel}

          </ul>

        </li>

        {/dede:channelartlist} 

    <li class="last"></li>
  </ul>
</div>

<script type="text/javascript">
var topMenuNum = 0;
$("#ermeau li").hover(
function(){
topMenuNum++;
$(this).attr("id","kindMenuHover"+topMenuNum);
$("#kindMenuHover" + topMenuNum + " > ul").show();
$(this).parent().addClass("hover");
},
function(){
$("#"+$(this).attr("id")+" > ul").hide();
$(this).attr("id","");
$(this).parent().removeClass("hover");
}
);
</script>

最后，还要在放几句CSS代码，用于控制下拉二级菜单导航的样式。可以直接放在head.htm顶部。（CSS样式可以根据自己网站进行调整。）

<style>
/* Base-nav */
.base-nav{background-color:#ec1a6c;width:100%;padding:15px 0;height:30px;}
.base-nav ul{}
.base-nav li,.base-nav h3,.base-nav .cont,.base-nav p a{float:left;display:inline;}
.base-nav li{float:left;position:relative; 100px;<!--100px设置宽度强制换行用的，不然是横的-->height:30px; line-height:30px; margin-right:16px;}
.base-nav li.current,.base-nav li:hover{background:#B73551; }
.base-nav li.current a,.base-nav li:hover a{color:#fff;}
.base-nav a{display:block;font-size:16px;color:#f8d3d9; padding:0 10px; line-height:30px;height:30px;}
#ermeau>li{position:relative}
.base-nav #ermeau ul {display: none}
.base-nav #ermeau ul li {   background: #ec1a6c;    border-top: 1px solid #b73551;    padding: 5px 0;    width: 86px;    text-align: center; overflow: hidden;
 white-space: nowrap;}
.sub li:hover{background:#b73551;}
</style>

代码部分结束了。接下来，在自己网站后台栏目里创建几个子栏目。DEDECMS织梦网站下拉菜单导航
最后去生成一下整个网站，清除一下网站缓存。就可以发现自己的DEDECMS网站已经拥有了二级下拉菜单导航了。

给li的ul一个宽度，强制换行，亲测可用 li:hover ul{display:block;width:100px;}
追问
但新的问题出现了，下面的内容会随着二级菜单的出现下移，二级菜单不出现时又上移，这要如何解决，
追答
这个是定位的问题，菜单相对定位，下面部分绝对定位

ul{list-style:none; position:relative; }
给下面的部分一个绝对定位，如
div{ position: absolute; }

织梦二级下拉菜单

猜你喜欢