论坛首页 → Web前端技术论坛 →

纯CSS六级菜单

浏览 22021 次
锁定老帖子 主题：纯CSS六级菜单
精华帖 (0) :: 良好帖 (1) :: 新手帖 (3) :: 隐藏帖 (0)
作者 正文
  • 司徒正美
  • 等级: 三星会员
  • 性别:
  • 文章: 89
  • 积分: 330
  • 来自: 广州
   发表时间：2009-09-28   最后修改：2009-09-28
CSS

兼容所有主流浏览器（IE6，IE8，Maxthon2.5，firefox3.5，opera10，safari4与chrome2），而一点CSS hack也没有用。

 

//***************************结构层部分********************************

  <div class="menu">

    <ul>

      <li>

        <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

        <a href="http://www.cnblogs.com/rubylouvre/">菜单一</a>

        <ul class="second">

          <li>

            <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

            <a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a>

            <ul class="third">

              <li>

                <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

                <a href="http://www.cnblogs.com/rubylouvre/">三级菜单_11</a>

                <ul class="fourth">

                  <li>

                    <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

                    <a href="http://www.cnblogs.com/rubylouvre/">四级菜单_11</a>

                    <ul class="fifth">

                      <li>

                        <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

                        <a href="http://www.cnblogs.com/rubylouvre/">五级菜单_11</a>

                        <ul class="sixth">

                          <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_11</a></li>

                          <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_12</a></li>

                          <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_13</a></li>

                        </ul>

                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->

                      </li>

                      <li>

                        <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

                        <a href="http://www.cnblogs.com/rubylouvre/">五级菜单_11</a>

                        <ul class="sixth">

                          <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_11</a></li>

                          <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_12</a></li>

                          <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_13</a></li>

                        </ul>

                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->

                      </li>

                      <li>

                        <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

                        <a href="http://www.cnblogs.com/rubylouvre/">五级菜单_11</a>

                        <ul class="sixth">

                          <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_11</a></li>

                          <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_12</a></li>

                          <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_13</a></li>

                        </ul>

                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->

                      </li>

                    </ul>

                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->

                  </li>

                  <li><!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

                    <a href="http://www.cnblogs.com/rubylouvre/">五级菜单_12</a>

                    <ul class="sixth">

                      <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_11</a></li>

                      <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_12</a></li>

                      <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_13</a></li>

                    </ul>

                  <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

                </ul>

                <!--[if lte IE 6]></td></tr></table></a><![endif]-->

              </li>

              <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_12</a></li>

              <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_13</a></li>

              <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_14</a></li>

            </ul>

            <!--[if lte IE 6]></td></tr></table></a><![endif]-->

          </li>

          <li>

            <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

            <a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a>

            <ul class="third">

              <li>

                <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

                <a href="http://www.cnblogs.com/rubylouvre/">三级菜单_21</a>

                <ul class="fourth">

                  <li><a href="http://www.cnblogs.com/rubylouvre/">四级菜单_21</a></li>

                  <li><a href="http://www.cnblogs.com/rubylouvre/">四级菜单_22</a></li>

                </ul>

                <!--[if lte IE 6]></td></tr></table></a><![endif]-->

              </li>

              <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_22</a></li>

              <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_23</a></li>

              <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_24</a></li>

            </ul>

            <!--[if lte IE 6]></td></tr></table></a><![endif]-->

          </li>

        </ul>

        <!--[if lte IE 6]></td></tr></table></a><![endif]-->

      </li>

      <li>

        <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

        <a href="http://www.cnblogs.com/rubylouvre/">菜单二</a>

        <ul class="second">

          <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_21</a></li>

          <li>

            <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

            <a href="http://www.cnblogs.com/rubylouvre/">二级菜单_22</a>

            <ul class="third">

              <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_21</a></li>

              <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_22</a></li>

              <li>

                <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

                <a href="http://www.cnblogs.com/rubylouvre/">三级菜单_23</a>

                <ul class="fourth">

                  <li><a href="http://www.cnblogs.com/rubylouvre/">四级菜单_21</a></li>

                  <li><a href="http://www.cnblogs.com/rubylouvre/">四级菜单_22</a></li>

                  <li>

                    <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

                    <a href="http://www.cnblogs.com/rubylouvre/">四级菜单_23</a>

                    <ul class="fifth">

                      <li><a href="http://www.cnblogs.com/rubylouvre/">五级菜单_21</a></li>

                      <li><a href="http://www.cnblogs.com/rubylouvre/">五级菜单_22</a></li>

                      <li>

                        <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

                        <a href="http://www.cnblogs.com/rubylouvre/">五级菜单_23</a>

                        <ul class="sixth">

                          <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_21</a></li>

                          <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_22</a></li>

                          <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_23</a></li>

                          <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_24</a></li>

                          <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_25</a></li>

                          <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_26</a></li>

                        </ul>

                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->

                      </li>

                    </ul>

                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->

                  </li>

                </ul>

                <!--[if lte IE 6]></td></tr></table></a><![endif]-->

              </li>

            </ul>

            <!--[if lte IE 6]></td></tr></table></a><![endif]-->

          </li>

        </ul>

        <!--[if lte IE 6]></td></tr></table></a><![endif]-->

      </li>

      <li>

        <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

        <a href="http://www.cnblogs.com/rubylouvre/">菜单三</a>

        <ul class="second">

          <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_31</a></li>

          <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_32</a></li>

        </ul>

        <!--[if lte IE 6]></td></tr></table></a><![endif]-->

      </li>

      <li>

        <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

        <a href="http://www.cnblogs.com/rubylouvre/">菜单四</a>

        <ul class="second">

          <li>

            <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

            <a href="http://www.cnblogs.com/rubylouvre/">二级菜单_41</a>

            <ul class="third">

              <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_41</a></li>

              <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_42</a></li>

              <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_43</a></li>

              <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_44</a></li>

            </ul>

            <!--[if lte IE 6]></td></tr></table></a><![endif]-->

          </li>

          <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_42</a></li>

        </ul>

        <!--[if lte IE 6]></td></tr></table></a><![endif]-->

      </li>

    </ul>

  </div>

//********************表现层部分*****************

 

  <style type="text/css">

    * {

      margin:0;

      padding:0;

    }

    .menu {

      font-size:12px;

    }

    .menu li {/*水平菜单*/

      float:left;

      list-style:none;

      position:relative;/*把包含块移动li元素*/

    }

    .menu a {

      display:block;

      height:32px;

      width:100px;

      line-height:32px;

      background:#a9ea00;

      color:#ff8040;

      text-decoration:none;

      text-align:center;

      overflow:hidden;/*★★★★*/

    }

    .menu a:hover {

      background:#369;

      color:#fff;

    }

    /*新增的二级菜单部分*/

    .menu ul ul {

      visibility:hidden;/*隐藏所有子菜单（二级的,三级的）*/

      position:absolute;

      left:0px;

      top:32px;

    }

    /*指定是显示二级子菜单*/

    .menu ul li:hover ul.second,/*非IE6*/

    .menu ul a:hover ul.second{/*IE6*/

      visibility:visible;

    }

 

    .menu ul ul li {

      clear:both;/*垂直显示*/

      text-align:left;

    }

    .menu .third,.menu .fourth,.menu .fifth,.menu .sixth{

      top:0px;/*重设子菜单相对于包含块哪个位置出现*/

      left:100px;

    }

    /*指定是显示三级子菜单*/

    .menu ul ul li:hover ul.third,

    .menu ul ul a:hover ul.third{

      visibility:visible;

    }

    /*指定是显示四级子菜单*/

    .menu ul ul ul li:hover ul.fourth,

    .menu ul ul ul a:hover ul.fourth{

      visibility:visible;

    }

    /*指定是显示五级子菜单*/

    .menu ul ul ul ul li:hover ul.fifth,

    .menu ul ul ul ul a:hover ul.fifth{

      visibility:visible;

    }

    /*指定是显示六级子菜单*/

    .menu ul ul ul ul ul li:hover ul.sixth,

    .menu ul ul ul ul ul a:hover ul.sixth{

      visibility:visible;

    }

    /*重设子菜单在鼠标滑过时的样式，有多少个ul就表明当前是多少级子菜单*/

    /*二级子菜单*/

    .menu ul ul a:hover{

      background:black;

      color:white;

    }

    /*三级子菜单*/

    .menu ul ul ul a:hover{

      background:#B45B3E;

      color:#369;

    }

    .menu ul ul ul ul a:hover{

      background:#FFE8AA;

      color:#68DFFB;

    }

    .menu ul ul ul ul ul a:hover{

      background:#8080C0;

      color:#F8F8F8;

    }

    .menu ul ul ul ul ul ul a:hover{

      background:#f00;

      color:#000;

    }

    .menu table{

      border-collapse:collapse;

    }

  </style>

  • 保证hover时，对应的子菜单的top与left在包含块的范围内。
  • 通常我们是用hover来调用display实现子元素的隐现，但在IE6中，mouseout后它不会乖乖消失，得换visibility上阵。
  • 某些浏览器在用a:hover来切换绝对定位子元素存在bug，统一用li:hover实现。
  • 在IE6中，激活父级元素的a:hover后再调用其子孙元素的a:hover时，会没有反应，换言之，不继续向下渲染。这时我们需要table这个容错能力最强的标签出马。
  • 为了跨平台的需要，我们需要用到IE条件注释来切换相应的结构层代码。
  • 在IE6中，当li元素包含display为block的元素时（如a）会多出5px，我们可以用overflow:hidden收拾之。
  • 在IE6中，table与td是存在空隙，当我们移动某个子菜单项时，其父菜单项就会因为这些透明的空间而染上两条边。解决方法：设置table的border-collapse为collapse。


由于论坛没有不能实时运行代码，建议移步我的博客中欣赏运行效果。

纯CSS多级菜单

纯CSS多级菜单2

 
返回顶楼
         
  • jncz
  • 等级: 三星会员
  • 文章: 132
  • 积分: 327
   发表时间：2009-09-28  
代码还可以精简一下.
返回顶楼
          回帖地址
0 请登录后投票
  • satanest
  • 等级: 初级会员
  • 性别:
  • 文章: 59
  • 积分: 50
  • 来自: 广州
   发表时间：2009-09-28  
代码不够通用,而且跟html结合太密了,看得晕
返回顶楼
          回帖地址
0 请登录后投票
  • wubo19842008
  • 等级: 初级会员
  • 性别:
  • 文章: 45
  • 积分: 30
  • 来自: 北京
   发表时间：2009-09-28  
想法不错，不过不够实用，html太繁琐了
返回顶楼
          回帖地址
0 请登录后投票
  • xiaoyiz
  • 等级: 初级会员
  • 性别:
  • 文章: 53
  • 积分: 0
  • 来自: 北京
   发表时间：2009-09-29  
颜色好丑好刺眼，楼主的品味。。。。
返回顶楼
          回帖地址
0 请登录后投票
  • caiceclb
  • 等级: 初级会员
  • 性别:
  • 文章: 116
  • 积分: 90
  • 来自: 郑州
   发表时间：2009-09-29  
....不过是二级做成六级而已，简单的累加，没啥新鲜的地方
返回顶楼
          回帖地址
0 请登录后投票
  • elementstorm
  • 等级: 初级会员
  • 性别:
  • 文章: 104
  • 积分: 40
  • 来自: 河南
   发表时间：2009-09-29  
上次楼主的45种图片切换效果还没来得及学习呢...
返回顶楼
          回帖地址
0 请登录后投票
  • hongkong
  • 等级: 初级会员
  • 性别:
  • 文章: 90
  • 积分: 30
  • 来自: 南京
   发表时间：2009-09-29  
gg搜索 jquery menu 一大堆
返回顶楼
          回帖地址
0 请登录后投票
  • qlhl2000
  • 等级: 初级会员
  • 性别:
  • 文章: 23
  • 积分: 30
  • 来自: 山东海阳市
   发表时间：2009-09-29  
庞大且不通用，但表现层部分也有可借鉴之处
返回顶楼
          回帖地址
0 请登录后投票
  • fireflyman
  • 等级: 四星会员
  • 性别:
  • 文章: 435
  • 积分: 420
  • 来自: 火星
   发表时间：2009-09-29  
貌似現在大家都在搞用戶體驗,LZ的似乎太過繁瑣了,不夠整潔.建議參考下面文章,改善用戶體驗:
http://www.dbanotes.net/web/stop_password_masking.html
http://ucdchina.com/snap/4585
http://ucdchina.com/snap/3256
http://5key.net/blog/2008/10/13/good-register-flow/
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics