DeDeCMS中如何实现下拉菜单

在5.7版本，已经有比较简单的方法实现下拉菜单，我们可以用它已有方法，也可以用我写的第二种方法来实现

1. 在需要下拉菜单的地方加入以下代码

    

  <div id="navMenu">
			<ul>
				<li><a href="{dede:global.cfg_indexurl/}">首页</a></li>                                
                                    {dede:channel row='10' typeid="13"}
				    <li><a href="[field:typeurl/]"[field:rel/]>[field:typename/]</a></li></li>                                 
                                    {/dede:channel}
			</ul>
		</div>

     在页面底部加入以下代码

<script type='text/javascript' src='{dede:global.cfg_cmsurl/}/images/js/dropdown.js'></script>
{dede:channelartlist typeid='13' 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>

     再加入以下样式

<style type="text/css">
	.dropMenu {
		position: absolute;
		top: 0;
		z-index: 100;
		width: 80px;
		visibility: hidden;
		filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,
			direction=135, strength=4);
		margin-top: -1px;
		border: 3px solid #FF0000;
		border-top: 0px solid #3CA2DC;
		background-color: #FFF;
		background: url(templets/sdgwy/index_files/mmenubg.gif);
		padding-top: 6px;
		padding-bottom: 6px;
	}
	
	.dropMenu li {
		margin-top: 2px;
		margin-bottom: 4px;
		padding-left: 6px;
	}
	
	.dropMenu a {
		width: auto;
		display: block;
		color: black;
		padding: 2px 0 2px 1.2em;
	}
	
	* html .dropMenu a {
		width: 100%;
	}
	
	.dropMenu a:hover {
		color: red;
		text-decoration: underline;
	}
	</style>

这样就可以出二级菜单了，你需要自己再调一下显示样式

2. 用channelartlist和sql标签来生成li

   

<nav id="navigation" class="navigation clearfix">
			<ul class="clearfix">
				<li class='active'>
					<a href="{dede:global.cfg_indexurl/}/" rel=“nofollow”>首页</a>
				</li>
				{dede:channelartlist typeid='13'}
					<li><a href='{dede:field name='typeurl'/}'>{dede:field name='typename'/}</a>
						<ul> 
						{dede:sql sql='Select * from dede_arctype where reid=~id~  ORDER BY id limit 0,17'} 
						<li><a href='[field:typeurl/]'>[field:typename/]</a></li> 
						{/dede:sql} 
						</ul>
					</li>
				{/dede:channelartlist}
			</ul>
			<div class="widget_social clearfix">
				<ul class="social-icons clearfix">
					<li class="facebook"><a href="#">Facebook<span></span></a></li>
					<li class="twitter"><a href="#">Twitter <span></span></a></li>
					<li class="rss"><a href="#">Rss <span></span></a></li>
					<li class="youtube"><a href="#">YouTube <span></span></a></li>
				</ul><!--/ .social-icons-->
			</div><!--/ .widget_social-->
		</nav><!--/ #navigation-->

这样就生成出

<ul>

    <li>

         <ul>

                <li></li>

         </ul>

    </li>

</ul>

这样的结构，然后网上随便搞个jquery的下拉菜单的代码都可以实现漂亮的下拉菜单了