织梦V5.7 导航下拉怎么添加？

织梦V5.7 导航下拉添加方法如下：

1、在【核心】下的【网站栏目管理】页面

2、首先添加【添加顶级栏目】，添加成功后，列表后面点击【添加子类】即二级栏目的。

3、后台没侍孝显示时点击下顶级栏目前面的+图片就出现二级栏目了，如果老锋稿前台没显示，很有可能是你前台显示二级栏目的标签没有写，所以没显示。

4、标签应该写法如下：

{dede:channelartlist typeid='top' typeid='1,2,3,4,5,6' row='6' orderby='sortrank'}

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

<ul>

{dede:channel row='15' type='son'}

<li><a href='[field:typelink/]'>[field:typename/]</a>基唯</li>

{/dede:channel}

</ul>

</li>

{/dede:channelartlist}

{dede:channelartlist typeid='top' typeid='1,2,3,4,5,6' row='6' orderby='sortrank'}

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

{/dede:channelartlist}

是显示ID分别为1,2,3,4,5,6的顶级栏目

{dede:channel row='15' type='son'}

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

{/dede:channel}

这是显示相应顶级栏目下的二级栏目，row='15' 表示显示最多15个

这个织梦自带下拉的，只是没启用！

第一步添加js代码，同那些网上搜的文章一样

首先在\templets\default\footer.html文件中的头部加上这段代码

<script type='text/javascript' src='{dede:global.cfg_cmsurl/}/images/js/dropdown.js'></script>

{dede:channelartlist typeid='top' cacheid='channelsonlist'}<ul id="dropmenu{dede:field.typeid/}" class="dropMenu">

{dede:channel type='son' noself='yes'} <li><a href="[field:typelink/]">[field:typename/]</a></li>

{/dede:channel}

</ul>

{/dede:channelartlist}

<script type="text/javascript">cssdropdown.startchrome("navMenu")</script>

这段代码就是导航下拉菜单的js代码，在dede的程序辩正文件里默认的有这个js文件。

添加上这段代码就已经出现下拉菜单了，只是我们看到的是透明的而且是竖排的效果，透明的原因是没有图片的效果

我们到到\dede\img里找mmenubg.gif然后复制到/templets/default/images下面，刷新再看一下效果，呵呵，导稿灶念航栏是不是已经出现熟悉的下拉菜单了。

第二步，修改dedecms.css

我们看到的是竖排的，下面键困我们就把改为横排的。

首先找到\templets\default\style\dedecms.css文件

找到

.dropMenu a {

width: auto

display: block

color: black

padding: 2px 0 2px 1.2em

将里面的里面的display: block去掉，然后找到

.dropMenu {

position:absolute

top: 0

z-index:100

width: 120px

visibility: hidden

将 width: 120改成width: auto就好了。

找到以下代码

margin-top: -1px

border: 1px solid #93E1EB

border-top: 0px solid #3CA2DC

background-color: #FFF

background:url(../images/mmenubg.gif)

padding-top:6px

padding-bottom:6px

}

.dropMenu li {

margin-top:2px

margin-bottom:4px

padding-left:6px

然后修改为如下代码：

margin-top: -1px

border: 1px solid #93E1EB

border-top: 0px solid #3CA2DC

background-color: #FBFFFD（这里的颜色根据你图片的颜色来调整）

background:url(../images/mmenubg.gif) (这个背景图片你可以自己制作)

padding-top:6px

padding-bottom:6px

}

.dropMenu li {

border-left:1px solid #666666

float:left

height:14px

line-height:14px

margin-left:-2px

padding-left:-10px

padding-right:6px

修改后效果

这样最终的效果就如文字开始时的那样了，当然/images/mmenubg.gif是需要你自己去ps的，你ps的越好看，这个下拉的二级菜单肯定就越漂亮。

---