phpcms_v9三级导航(带样式)

<map>
        <ul class="nav-site">
         {pc:content action="category" catid="0" num="25" siteid="$siteid" order="listorder ASC"}
        <li><a href="{siteurl($siteid)}"><span>首页</span></a></li>
        <li class="line">|</li>
        {loop $data $k $v}
             <li><a href="{$v[url]}">{$v[catname]}
             <!--[if IE 7]><!--></a><!--<![endif]-->
             <!--[if lte IE 6]><table><tr><td><![endif]-->
             <ul>
            {pc:content action="category" catid="$k" num="10" siteid="$siteid" order="listorder ASC"}
                {loop $data $b $d}
                    <li><a href="{$d[url]}">{$d[catname]}
                    <!--[if IE 7]><!--></a><!--<![endif]-->
                    <!--[if lte IE 6]><table><tr><td><![endif]-->

                        <ul class="nav-site22">
                        {pc:content action="category" catid="$b" num="10" siteid="$siteid" order="listorder ASC"}
                            {loop $data $r}
                                <li><a href="{$r[url]}">{$r[catname]}</a></li>
                            {/loop}
                        {/pc}
                         </ul>
                    </li>

                {/loop}
            {/pc}
             </ul>
           <!--[if lte IE 6]></td></tr></table></a><![endif]-->
           </li>
           <li class="line">|</li>
       {/loop}
   {/pc}
   </ul>
        {php echo runhook(‘glogal_menu‘)}
        </map>
 

CSS代码如下：

.nav-site{
list-style:none;}
.nav-site li {position:relative; z-index:10;margin-left:0px !important;}
.nav-site ul {visibility:hidden;position:absolute;left:0px;top:30px;}
.nav-site table {position:absolute; top:0; left:0;}
.nav-site li:hover>ul,
.nav-site a:hover ul{visibility:visible;}
.nav-site a:hover{background:#3a6ea5;color:#ffffff;}
.nav-site ul{  }
.nav-site ul a{background-color:#FFF100;color:#333333;border-top:1px solid #7aa5d2;
border-bottom:1px solid #4e6a87;text-decoration:none;}
.nav-site ul li {clear:both;height:28px !important; line-height:28px !important; text-align:center;font-size:13px;list-style: none; }
.nav-site ul li a{display:block;width:138px;}
.nav-site ul li a:hover{ border-top:1px solid #7aa5d2;
border-bottom:1px solid #4e6a87;color:#ffffff;background:#6d93bc;}

.nav-site22{list-style:none;margin-left:137px;}
.nav-site22 li {position:relative; z-index:30;padding-lef:0px;bottom: 30px;}
.nav-site22 ul {visibility:hidden;position:absolute;left:0px;top:0px !important;}
.nav-site22 table {position:absolute; top:0px; left:3px;}
.nav-site22 li:hover> ul{visibility:visible;}
.nav-site22 a:hover >ul{visibility:visible;}
.nav-site22 a:hover{background:#3a6ea5;}
.nav-site22 ul{  }
.nav-site22 ul a{
background-color:#FFF100;color:#ffffff;border-top:1px solid #7aa5d2;border-bottom:1px solid #4e6a87;
text-decoration:none;}
.nav-site22 ul li {clear:both;height:38px !important; line-height:38px !important; text-align:center;font-size:13px;list-style: none;margin-top:10px; }
.nav-site22 ul li a{display:block;width:138px;}
.nav-site22 ul li a:hover{ border-top:1px solid #7aa5d2;border-bottom:1px solid #4e6a87;background:#6d93bc;}