在博客中插入六级菜单的代码
以下代码我放在博客(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>