| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 693 人关注过本帖, 1 人收藏
标题:在博客中插入六级菜单的代码
只看楼主 加入收藏
fyz520
Rank: 1
等 级:新手上路
帖 子:120
专家分:1
注 册:2010-1-27
结帖率:95.12%
收藏(1)
 问题点数:0 回复次数:0 
在博客中插入六级菜单的代码
以下代码我放在博客(my.)公告栏里,可以正常显示,但是这是一级菜单,我想要六级菜单的代码,谢谢各位,帮帮忙!
<ul class="my_mm">
  <li>通知公告
    <div>
     <a href="#">2010年</a>
     <a href="#">2009年</a>
    </div>
  </li>
  <li>其他栏目
    <div>
      <a href="#">栏目一</a>
    </div>
  </li>
</ul>
<div class="clr"></div>
<style>
.my_mm { margin: 0; padding: 0; list-style: none; }
.my_mm li { margin: 0 4px; float: left; }
.my_mm div { width: 120px; border: 1px solid #999; background: #fff; display: none; position: absolute; }
.my_mm li:hover div { display: block; }
.my_mm div a { padding: 2px 8px; text-decoration: none; display: block; }
.my_mm div a:hover { background: #ccc; }
</style>





以下这部分代码 是我在网上找的,能呈现六级菜单效果,但是要做修改了才放进博客里,请高人帮忙修改一下


<!doctype html>
<title>纯CSS多级菜单by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="纯CSS多级菜单 by 司徒正美" />
<meta name="description" content="纯CSS多级菜单 by 司徒正美" />
</head>
<body>
  <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>
  <h3>纯CSS多级菜单 by 司徒正美</h3>
  <p>这是六级菜单,只要页面够长,十级也能弄出来!</p>
  <div class="menu">
    <ul>
      <li>
        <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
        <a href="http://菜单一</a>
        <ul class="second">
          <li>
            <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
            <a href="http://二级菜单_11</a>
            <ul class="third">
              <li>
                <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
                <a href="http://三级菜单_11</a>
                <ul class="fourth">
                  <li>
                    <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
                    <a href="http://四级菜单_11</a>
                    <ul class="fifth">
                      <li>
                        <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
                        <a href="http://五级菜单_11</a>
                        <ul class="sixth">
                          <li><a href="http://六级菜单_11</a></li>
                          <li><a href="http://六级菜单_12</a></li>
                          <li><a href="http://六级菜单_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://五级菜单_11</a>
                        <ul class="sixth">
                          <li><a href="http://六级菜单_11</a></li>
                          <li><a href="http://六级菜单_12</a></li>
                          <li><a href="http://六级菜单_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://五级菜单_11</a>
                        <ul class="sixth">
                          <li><a href="http://六级菜单_11</a></li>
                          <li><a href="http://六级菜单_12</a></li>
                          <li><a href="http://六级菜单_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://五级菜单_12</a>
                    <ul class="sixth">
                      <li><a href="http://六级菜单_11</a></li>
                      <li><a href="http://六级菜单_12</a></li>
                      <li><a href="http://六级菜单_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://三级菜单_12</a></li>
              <li><a href="http://三级菜单_13</a></li>
              <li><a href="http://三级菜单_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://二级菜单_12</a>
            <ul class="third">
              <li>
                <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
                <a href="http://三级菜单_21</a>
                <ul class="fourth">
                  <li><a href="http://四级菜单_21</a></li>
                  <li><a href="http://四级菜单_22</a></li>
                </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
              </li>
              <li><a href="http://三级菜单_22</a></li>
              <li><a href="http://三级菜单_23</a></li>
              <li><a href="http://三级菜单_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://菜单二</a>
        <ul class="second">
          <li><a href="http://二级菜单_21</a></li>
          <li>
            <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
            <a href="http://二级菜单_22</a>
            <ul class="third">
              <li><a href="http://三级菜单_21</a></li>
              <li><a href="http://三级菜单_22</a></li>
              <li>
                <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
                <a href="http://三级菜单_23</a>
                <ul class="fourth">
                  <li><a href="http://四级菜单_21</a></li>
                  <li><a href="http://四级菜单_22</a></li>
                  <li>
                    <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
                    <a href="http://四级菜单_23</a>
                    <ul class="fifth">
                      <li><a href="http://五级菜单_21</a></li>
                      <li><a href="http://五级菜单_22</a></li>
                      <li>
                        <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
                        <a href="http://五级菜单_23</a>
                        <ul class="sixth">
                          <li><a href="http://六级菜单_21</a></li>
                          <li><a href="http://六级菜单_22</a></li>
                          <li><a href="http://六级菜单_23</a></li>
                          <li><a href="http://六级菜单_24</a></li>
                          <li><a href="http://六级菜单_25</a></li>
                          <li><a href="http://六级菜单_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://菜单三</a>
        <ul class="second">
          <li><a href="http://二级菜单_31</a></li>
          <li><a href="http://二级菜单_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://菜单四</a>
        <ul class="second">
          <li>
            <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
            <a href="http://二级菜单_41</a>
            <ul class="third">
              <li><a href="http://三级菜单_41</a></li>
              <li><a href="http://三级菜单_42</a></li>
              <li><a href="http://三级菜单_43</a></li>
              <li><a href="http://三级菜单_44</a></li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
          </li>
          <li><a href="http://二级菜单_42</a></li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
      </li>
    </ul>
  </div>
</body>
</html>
搜索更多相关主题的帖子: 博客 六级 菜单 代码 
2010-10-24 15:46
快速回复:在博客中插入六级菜单的代码
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.021395 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved