一直以来使用kesioncms的时候，全站导航菜单我都是写死的（因为实在是不喜欢官方在后台提供的那个纯JS版顶部菜单，一来蜘蛛索引不了对SEO不好，二来看起来实在很蹩脚）今天刚好需要，自己撸了一个

查询语句

select id,foldername,tj from KS_Class where topflag=1 Order BY root,folderorder

循环体

<div class="i_nav">

[loop=1000]

<a href="{$Field(id,GetInfoUrl,100,1)}" rel="{$Field(tj,Num,0,2)}">{$Field(foldername,Text,0,...,0,)}</a>

[/loop]

</div>

CSS

.i_nav{
 width:1000px;
 margin:auto;
}
/*定义菜单*/
.i_nav .i_menu{
 font-size:12px;
 height: 30px;
 line-height: 30px;
}
.i_nav .i_menu li {
 color: #fff;
 height: 30px;
 line-height: 30px;
 position: relative;
 float: left;
 width: 100px;
 white-space:nowrap;
}
.i_nav .i_menu li a {
 display: block;
 text-align:center;
 width: 100px;
 overflow:hidden;
}
.i_nav .i_menu li ul a{
 text-align:left;
}
/*下拉菜单样式*/
.i_nav .i_sub_menu {
 position: absolute;
 width: 230px;
 display: none;
 z-index: 999;
 border:1px #6491d9 solid;
 background:#ebf9ff;
 text-align:left;
}
.i_nav .i_menu li .i_sub_menu li {
 font-size: 12px;
 position: relative;
 width: 230px;
 height: 30px;
 text-align:left;
 text-indent:10px;
 
}
.i_nav .i_menu li .i_sub_menu li a {
 width: 230px;
 display: block;
 height: 30px;
}
.i_nav .i_menu a:hover{
 color: #fff;
 text-decoration:none;
}
.i_nav .i_menu li .i_sub_menu li a:hover,.i_nav .i_menu li .i_sub_menu li a.now {
 background-color: #2772f3;
 color: #fff;
 text-decoration:none;
}
.i_nav .i_menu li.now,.i_nav .i_menu li.current {
 background-color: #2772f3;
 color: #fff;
}
/*如果有下拉菜单添加的class*/
.i_nav .hasmenu {
}
/*主导航箭头向下*/
.i_nav .i_menu li a.hasmenu {
}
/*下拉菜单箭头向右*/
.i_nav .i_menu li .i_sub_menu li a.hasmenu {
}
.i_nav .i_menu li .i_sub_menu li a.hasmenu:hover {
 color: #fff;
}

JQ

<script type="text/javascript">
$(function(){
 //遍历后拼接菜单
 var navcode='',classname='',pretj=0,thistj=0;
 $(".i_nav a").each(function(i){
  thistj=$(this).attr("rel");
  if (thistj<pretj){
   for (var tj=0;tj<pretj-thistj;tj++){
    navcode+='</li></ul>';
   }
  }
  (thistj==1) ? classname='i_menu' : classname='i_sub_menu';
  (thistj>pretj) ? navcode+='<ul class="'+classname+'">' : navcode+='</li>';
  navcode+='<li><a href="'+$(this).attr("href")+'">'+$(this).text()+'</a>';
  pretj=thistj;
 });
 for (var tj=0;tj<pretj;tj++){
  navcode+='</li></ul>';
 }
 $(".i_nav").html(navcode);
 //一级悬停
 $(".i_menu li").hover(function(){
  $(this).addClass("now");
  $(this).find("ul.i_sub_menu:first").show();
 },function(){
  $(this).removeClass("now");
  $(this).find("ul.i_sub_menu:first").hide();
 });
 //二级偏移
 $(".i_sub_menu").css({left:"0px",top:"30px"});
 //二级以上偏移
 $(".i_sub_menu").find(".i_sub_menu").css({left:"200px",top:"0px"});
 //多级悬停
 $(".i_sub_menu li").hover(function(){
  $(this).find("a:first").addClass("now");
  $(this).find("ul:first").show();
 },function(){
  $(this).find("a:first").removeClass("now");
  $(this).find("ul:first").hide();
 });
});
</script>