zoukankan      html  css  js  c++  java
  • 六级下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312">
    <div class="menu">
      <ul>
        <li>
          <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
          <a href="http://www.cnblogs.com/freespider/">菜单一</a>
          <ul class="second">
            <li>
              <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
              <a href="http://www.cnblogs.com/freespider/">二级菜单_11</a>
              <ul class="third">
                <li>
                  <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
                  <a href="http://www.cnblogs.com/freespider/">三级菜单_11</a>
                  <ul class="fourth">
                    <li>
                      <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
                      <a href="http://www.cnblogs.com/freespider/">四级菜单_11</a>
                      <ul class="fifth">
                        <li>
                          <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
                          <a href="http://www.cnblogs.com/freespider/">五级菜单_11</a>
                          <ul class="sixth">
                            <li><a href="http://www.cnblogs.com/freespider/">六级菜单_11</a></li>
                            <li><a href="http://www.cnblogs.com/freespider/">六级菜单_12</a></li>
                            <li><a href="http://www.cnblogs.com/freespider/">六级菜单_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/freespider/">五级菜单_11</a>
                          <ul class="sixth">
                            <li><a href="http://www.cnblogs.com/freespider/">六级菜单_11</a></li>
                            <li><a href="http://www.cnblogs.com/freespider/">六级菜单_12</a></li>
                            <li><a href="http://www.cnblogs.com/freespider/">六级菜单_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/freespider/">五级菜单_11</a>
                          <ul class="sixth">
                            <li><a href="http://www.cnblogs.com/freespider/">六级菜单_11</a></li>
                            <li><a href="http://www.cnblogs.com/freespider/">六级菜单_12</a></li>
                            <li><a href="http://www.cnblogs.com/freespider/">六级菜单_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/freespider/">五级菜单_12</a>
                      <ul class="sixth">
                        <li><a href="http://www.cnblogs.com/freespider/">六级菜单_11</a></li>
                        <li><a href="http://www.cnblogs.com/freespider/">六级菜单_12</a></li>
                        <li><a href="http://www.cnblogs.com/freespider/">六级菜单_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/freespider/">三级菜单_12</a></li>
                <li><a href="http://www.cnblogs.com/freespider/">三级菜单_13</a></li>
                <li><a href="http://www.cnblogs.com/freespider/">三级菜单_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/freespider/">二级菜单_12</a>
              <ul class="third">
                <li>
                  <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
                  <a href="http://www.cnblogs.com/freespider/">三级菜单_21</a>
                  <ul class="fourth">
                    <li><a href="http://www.cnblogs.com/freespider/">四级菜单_21</a></li>
                    <li><a href="http://www.cnblogs.com/freespider/">四级菜单_22</a></li>
                  </ul>
                  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
                <li><a href="http://www.cnblogs.com/freespider/">三级菜单_22</a></li>
                <li><a href="http://www.cnblogs.com/freespider/">三级菜单_23</a></li>
                <li><a href="http://www.cnblogs.com/freespider/">三级菜单_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/freespider/">菜单二</a>
          <ul class="second">
            <li><a href="http://www.cnblogs.com/freespider/">二级菜单_21</a></li>
            <li>
              <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
              <a href="http://www.cnblogs.com/freespider/">二级菜单_22</a>
              <ul class="third">
                <li><a href="http://www.cnblogs.com/freespider/">三级菜单_21</a></li>
                <li><a href="http://www.cnblogs.com/freespider/">三级菜单_22</a></li>
                <li>
                  <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
                  <a href="http://www.cnblogs.com/freespider/">三级菜单_23</a>
                  <ul class="fourth">
                    <li><a href="http://www.cnblogs.com/freespider/">四级菜单_21</a></li>
                    <li><a href="http://www.cnblogs.com/freespider/">四级菜单_22</a></li>
                    <li>
                      <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
                      <a href="http://www.cnblogs.com/freespider/">四级菜单_23</a>
                      <ul class="fifth">
                        <li><a href="http://www.cnblogs.com/freespider/">五级菜单_21</a></li>
                        <li><a href="http://www.cnblogs.com/freespider/">五级菜单_22</a></li>
                        <li>
                          <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
                          <a href="http://www.cnblogs.com/freespider/">五级菜单_23</a>
                          <ul class="sixth">
                            <li><a href="http://www.cnblogs.com/freespider/">六级菜单_21</a></li>
                            <li><a href="http://www.cnblogs.com/freespider/">六级菜单_22</a></li>
                            <li><a href="http://www.cnblogs.com/freespider/">六级菜单_23</a></li>
                            <li><a href="http://www.cnblogs.com/freespider/">六级菜单_24</a></li>
                            <li><a href="http://www.cnblogs.com/freespider/">六级菜单_25</a></li>
                            <li><a href="http://www.cnblogs.com/freespider/">六级菜单_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/freespider/">菜单三</a>
          <ul class="second">
            <li><a href="http://www.cnblogs.com/freespider/">二级菜单_31</a></li>
            <li><a href="http://www.cnblogs.com/freespider/">二级菜单_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/freespider/">菜单四</a>
          <ul class="second">
            <li>
              <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
              <a href="http://www.cnblogs.com/freespider/">二级菜单_41</a>
              <ul class="third">
                <li><a href="http://www.cnblogs.com/freespider/">三级菜单_41</a></li>
                <li><a href="http://www.cnblogs.com/freespider/">三级菜单_42</a></li>
                <li><a href="http://www.cnblogs.com/freespider/">三级菜单_43</a></li>
                <li><a href="http://www.cnblogs.com/freespider/">三级菜单_44</a></li>
              </ul>
              <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li><a href="http://www.cnblogs.com/freespider/">二级菜单_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;
    
          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>
    
  • 相关阅读:
    es基本使用之查询数据
    python 时间格式转换
    Linux 使用scp命令定时将文件备份到另一台服务器
    Scrapy项目运行和debug断点调试
    Day042.绘制9个同心圆
    Day041.画蟒蛇-用函数来封装
    Day040.画蟒蛇-不加库前缀
    Day039.画蟒蛇
    Day038.用函数来进行温度转换
    Day037.带循环的温度转换
  • 原文地址:https://www.cnblogs.com/freespider/p/2023339.html
Copyright © 2011-2022 走看看