如何为dedecms5.7sp1模板添加下拉菜单？

在dedecms5.7sp1模板中添加下拉菜单的方法，可以通过移植dedecms5.5版本中的下拉菜单功能来实现，以下是具体步骤：

首页导航栏目代码调用

需要在首页导航栏目中添加以下代码：

<div id="navMenu">
    <ul>
        <li><a href="{dede:global.cfg_cmsurl/}/">首页</a></li>
        {dede:channel type='top' row='6' currentstyle="<li class='hover'><a href='~typelink~' ~rel~>~typename~</a></li>"}
        <li><a href='[field:typeurl/]' [field:rel/]>[field:typename/]</a></li>
    {/dede:channel}
    </ul>
</div>

id="navMenu"这个ID是必须有的。

添加JavaScript和CSS代码

在模板的任何位置（例如footer.htm文件中）添加以下JavaScript和CSS代码：

<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>

在CSS样式表中添加以下样式：

/*——– 下拉菜单 ————–*/
.dropMenu {
    position: absolute;
    top: 0;
    zindex: 100;
    width: 80px;
    visibility: hidden;
    margintop: 1px;
    border: 1px solid #003366;
    bordertop: 0px solid #3CA2DC; backgroundcolor: #FFFFFF;
    paddingtop: 6px;
    paddingbottom: 6px;
}
.dropMenu li {
    margintop: 2px;
    marginbottom: 4px;
    paddingleft: 0px;
}
.dropMenu a {
    width: auto;
    display: block;
    color: black;
    padding: 2px 0 2px 1.2em;
}
html .dropMenu a {
    width: 100%;
}
.dropMenu a:hover {
    color: red;
    textdecoration: underline;
}

注意事项

1、确保已经将DedeCMS5.6或5.5程序文件夹中的mmenubg.gif图片复制到DedeCMS5.7程序文件夹/templets/default/images下面，否则下拉菜单可能会显示为透明。

2、如果需要调整下拉菜单的位置或其他样式，可以修改/templets/default/style/dedecms.css文件中的.dropMenu相关样式。

3、如果在IE6浏览器中下拉菜单显示不正常，可能是由于修改了导航上的CSS样式导致的，在这种情况下，需要特别注意div与select的关系。

FAQs

问题1：如何在dedecms5.7sp1模板中调整下拉菜单的宽度？

答：要调整下拉菜单的宽度，只需找到/templets/default/style/dedecms.css文件，然后使用Ctrl+F搜索.dropMenu，你可以修改width属性的值来调整宽度，将width: 80px;更改为所需的像素值。

问题2：为什么在IE6浏览器中下拉菜单显示不正常？

答：在IE6浏览器中下拉菜单显示不正常可能是因为在修改导航上的CSS样式时，a标签的高度影响了JS在select上的运用，由于select在层中是顶级的div无法覆盖，因此可能会出现显示问题，如果遇到这种情况，建议仔细检查并调整CSS样式，以确保兼容性。