• 全国400电话网上服务平台
    强大号码库资源任选,方便,快捷,快速开通。
    咨询热线:400-1100-266  

    dedecms纯CSS一级栏目下拉导航菜单
    POST TIME:2017-11-12 23:37
    dedecms纯CSS一级栏目下拉导航菜单,找了好久没找到满意的,网上的都是从以前DEDECMS5.5版本扒下来的,还要调用JS.整了半天,很多测试调用不出来,我找的这个上纯CSS,不需要修改其他网站文件,现分享给大家。

    样式:

    body{ font:14px "Microsoft YaHei", Arial,Verdana,tahoma, Srial, helvetica, sans-serif; line-height:1.8; color:#333; background:#fff;}
    .menu {height: 40px; background: #4ba036;position: relative; z-index:999;
    }
    .menu a {
    	text-decoration: none;display: block; padding: 0 12px; margin-right: 1px; line-height: 40px; font-size: 16px; color: #fff;
    }
    ul {
    	margin: 0;
    	padding: 0;
    }
    .menu li {
    	list-style: none;
    	float: left;
    	width: 90px;
    	overflow: visible;
    	cursor: pointer;
    }
    ul.level0 {
    	height: 40px;
    	overflow: visible;
    }
    ul.level1, ul.level2, ul.level3 {
    	width: 90px;
    	display: none;
    }
    ul.level2, ul.level3 {
    	margin: -28px 0 0 90px;
    }
    ul.level0 > li {
    	height: 40px;
    	line-height: 40px;
    	text-align: center;
    	background: #4ba036;
    }
    ul.level1 > li, ul.level2 > li, ul.level3 > li {
    	height: 40px;
    	line-height: 40px;
    	background: #308a1a;
    }
    ul.level0 > li:hover {
    	background: #308a1a;
    }
    ul.level1 > li:hover, ul.level2 > li:hover, ul.level3 > li:hover {
    	background: #4ba036;
    }
    ul.level0 > li.imyeah:hover > ul, ul.level1 > li.imyeah:hover > ul, ul.level2 > li.imyeah:hover > ul, ul.level3 > li.imyeah:hover > ul {
    	display: block;
    }


    调用代码:

    <div class="menu">
      <div class="bar">
        <ul class="level0">
          <li><a href="/">首页</a></li>
          {dede:channelartlist typeid="top" row='18' currentstyle="<li class='active'><a href='~typelink~' ~rel~><span>~typename~</span></a></li>"}
          <li class="imyeah"><a href="{dede:field name="typeurl"/}" target="_blank">{dede:field name="typename"/}</a>
            <ul class="level1">
              {dede:channel type="son"}
              <li><a href="[field:typeurl/]" title="[field:typename/]">[field:typename/]</a></li>
              {/dede:channel}
            </ul>
          </li>
          {/dede:channelartlist}
        </ul>
      </div>
    </div>



    
    关于我们 | 付款方式 | 建站知识 | 增值服务 | 网站模板
    Copyright © 2003-2016
    时间:9:00-21:00 (节假日不休)
    版权所有:巨人网络(扬州)科技有限公司
    总部地址:江苏省信息产业基地11号楼四层
    《增值电信业务经营许可证》 苏B2-20120278
    X

    截屏,微信识别二维码

    微信号:veteran88

    (点击微信号复制,添加好友)

     打开微信

    微信号已复制,请打开微信添加咨询详情!