destoon主导航子栏目下拉菜单的实现

   2015-11-27 0
核心提示:最近发现很多人在问主导航如何实现下拉呢,结合懒人图库的下拉菜单的样式,把他给移植过来了,适合内容较多的资讯网站使用,效果
最近发现很多人在问主导航如何实现下拉呢,结合懒人图库的下拉菜单的样式,把他给移植过来了,适合内容较多的资讯网站使用,效果见

http://www.lexue001.com/
http://www.besoo.com/

这两个网站的演示,代码如下:

EM截图_20151127114036




  • 首 页
  • {loop $MODULE $m}     {if $m[ismenu]} {/if}     {/loop}
    #daohang{width:980px;height:36px;background:#5A96C2;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:14px;z-index:99;float:left}
    .tab .tablink a{line-height:34px;color:#FFF;text-decoration:none}
    .tab:hover{background:#FFF}
    .tab:hover .tablink{color:#5A96C2;border:1px solid #5A96C2;padding:0 11px;text-decoration:none}
    .tab:hover .tablink a{color:#5A96C2}
    .dropdown:hover .arwlink{border-bottom:1px solid #FFF;border-left:1px solid #5A96C2;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:250px}
    .subnav a{padding:4px 0 4px 10px;line-height:18px;width:70px;display:block;white-space:nowrap;color:#333;float:left}
    .subnav :hover{text-decoration:underline;color:#5A96C2;}
    .dropdown .subnav{background:#FFF;border:1px solid #5A96C2;padding:8px}
    #daohang .menuon{
            font-weight: bold;        
    }
     
    反对 0举报 0 评论 0
     

    免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
        本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

    点击排行