destoon导航下拉二级菜单实现方法
<div class="m"> <div id=daohang> <li class="tab home"><a href="{$MODULE[1][linkurl]}" class="tablink {if $moduleid<4}menuon{/if}">首 页</a>< > {loop $MODULE $m} {if $m[ismenu]} <li class="tab dropdown"><a href="{$m[linkurl]}" class="tablink arwlink {if $m[moduleid]==$moduleid}menuon{/if}">{$m[name]}</a> <ul class="subnav"> {php $child = get_maincat(0, $m[moduleid],1);} {loop $child $c} <a href="{$m[linkurl]}{$c[linkurl]}">{set_style($c[catname], $c[style])}</a> {/loop} </ul> < >{/if} {/loop} </div> </div>
第二步:在/skin/default/style.css最后面加上以下内容:
/* 全站导航 */#daohang{width:980px;height:36px;background:#00CC00;margin-bottom:2px;position:relative;z-index:99}#daohang a{ text-decoration: none !important;}.home{margin-left:16px}.tab{position:relative;display:block;float:left;cursor:pointer}.tab .tablink{position:relative;padding:1px 12px;line-height:34px;display:block;height:34px;color:#fff;font-size:16px;z-index:99;float:left}.tab .tablink a{line-height:34px;color:#FFF;text-decoration:none}.tab:hover{background:#FFF}.tab:hover .tablink{color:#009900;border:1px solid #009900;padding:0 11px;text-decoration:none}.tab:hover .tablink a{color:#009900}.dropdown:hover .arwlink{border-bottom:1px solid #FFF;border-left:1px solid #009900;height:35px}.dropdown ul{display:none}.dropdown:hover ul{position:absolute;display:block;margin-left:-1px;top:36px;left:1px;z-index:9}.subnav{width:100px}.subnav a{padding:4px 0 4px 10px;line-height:18px;width:90px;display:block;white-space:nowrap;color:#333;float:left}.subnav :hover{text-decoration:underline;color:#fff; background:#00CC00;}.dropdown .subnav{background:#FFF;border:1px solid #009900;padding:8px}#daohang .menuon{ font-weight: bold; }