css 制作的三级菜单也可以当做二级菜单使用
2010-03-27 21:14
459 查看
原理很简单就不详细介绍了，自己可以将代码拷贝了粘贴到txt中，更改后缀为htm，然后用浏览器打开即可
大致界面截图如下
请参见网址
http://hi.csdn.net/space-2437150-do-album-picid-503621.html
如果需要使用，修改程序中的相关字段即可，较简单
大致界面截图如下
请参见网址
http://hi.csdn.net/space-2437150-do-album-picid-503621.html
如果需要使用，修改程序中的相关字段即可，较简单
<!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=utf-8" />
<title>强大的三级菜单</title>
<mce:style type="text/css"><!--
/* common styling */
.menu {
font-family: arial, 宋体, serif; font-size:20+px;
} /* 默认字体及大小*/
.menu ul li a, .menu ul li a:visited {
display:block; text-decoration:none; color:#666;width:146px; height:40px;
text-align:left; padding-left:24px; color:#000; border:0px solid #fff; background:#ff7400; font-size:20+px; overflow:hidden;
} /* 注意 width 加上 padding-left 必须等于下面的 line-height,即字体左对齐距离加上下拉菜单宽度等于上面模块的宽度 */
.menu ul {
line-height: 44px; padding:0; margin:0;list-style-type: none;
} /* line-wigth表示字距离大模块上面的距离*/
.menu ul li {
float: left; width: 170px; background:#ff7400; position:relative;
} /* width 表示上面每一个大的模块长度*/
/*.menu ul li a{color:#FFF;text-decoration:none;font-weight:bold;}*/
.menu ul li ul{display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {
color:#fff; background:#6a3;
} /* 某模块被选中时候模块背景颜色和字体颜色*/
.menu ul li:hover ul {
display:block; position:absolute; top:40px; left:0; width:105px;
} /* top下拉菜单距离上面的距离*/
.menu ul li:hover ul li a.hide {
background:#F3F3F3; color:#000;
} /* 隐藏菜单（第三级菜单字体和背景颜色*/
.menu ul li:hover ul li:hover a.hide {
background:#6fc; color:#FFF;line-height: 44px;
} /*下拉菜单被选中时候背景颜色和字体颜色*/
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {
display:block; background:#F3F3F3; color:#000;
} /* 下拉菜单的背景颜色和字体颜色*/
.menu ul li:hover ul li a:hover {
background:#6fc; color:#000;
} /* 选中该行时候的背景颜色和字体颜色*/
.menu ul li:hover ul li:hover ul {
display:block; position:absolute; left:170px; top:0;
} /* 第三级子菜单右边出来时候的距离,需要与上面模块的宽度保持一致*/
.menu ul li:hover ul li:hover ul.left {
left:-170px;
} /* 第三级子菜单左边出来时候的距离,需要与上面模块的宽度保持一致*/
--></mce:style><style type="text/css" mce_bogus="1">/* common styling */
.menu {
font-family: arial, 宋体, serif; font-size:20+px;
} /* 默认字体及大小*/
.menu ul li a, .menu ul li a:visited {
display:block; text-decoration:none; color:#666;width:146px; height:40px;
text-align:left; padding-left:24px; color:#000; border:0px solid #fff; background:#ff7400; font-size:20+px; overflow:hidden;
} /* 注意 width 加上 padding-left 必须等于下面的 line-height,即字体左对齐距离加上下拉菜单宽度等于上面模块的宽度 */
.menu ul {
line-height: 44px; padding:0; margin:0;list-style-type: none;
} /* line-wigth表示字距离大模块上面的距离*/
.menu ul li {
float: left; width: 170px; background:#ff7400; position:relative;
} /* width 表示上面每一个大的模块长度*/
/*.menu ul li a{color:#FFF;text-decoration:none;font-weight:bold;}*/
.menu ul li ul{display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {
color:#fff; background:#6a3;
} /* 某模块被选中时候模块背景颜色和字体颜色*/
.menu ul li:hover ul {
display:block; position:absolute; top:40px; left:0; width:105px;
} /* top下拉菜单距离上面的距离*/
.menu ul li:hover ul li a.hide {
background:#F3F3F3; color:#000;
} /* 隐藏菜单（第三级菜单字体和背景颜色*/
.menu ul li:hover ul li:hover a.hide {
background:#6fc; color:#FFF;line-height: 44px;
} /*下拉菜单被选中时候背景颜色和字体颜色*/
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {
display:block; background:#F3F3F3; color:#000;
} /* 下拉菜单的背景颜色和字体颜色*/
.menu ul li:hover ul li a:hover {
background:#6fc; color:#000;
} /* 选中该行时候的背景颜色和字体颜色*/
.menu ul li:hover ul li:hover ul {
display:block; position:absolute; left:170px; top:0;
} /* 第三级子菜单右边出来时候的距离,需要与上面模块的宽度保持一致*/
.menu ul li:hover ul li:hover ul.left {
left:-170px;
} /* 第三级子菜单左边出来时候的距离,需要与上面模块的宽度保持一致*/</style>
</head>
<body>
<div class="menu">
<ul>
<li><a class="hide" href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx" mce_href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx">首页</a>
<ul>
<li><a href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx" mce_href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx">首页子菜单1</a></li>
<li><a href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx" mce_href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx">首页子菜单2</a></li>
</ul>
</li>
<li><a class="hide" href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx" mce_href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx">功能1</a>
<ul>
<li><a href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx" mce_href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx">功能1子菜单1</a></li>
<li><a href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx" mce_href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx">功能1子菜单2</a></li>
<li><a href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx" mce_href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx">功能1子菜单3</a></li>
</ul>
</li>
<li><a class="hide" href="http://hi.csdn.net/space.php?do=home" mce_href="http://hi.csdn.net/space.php?do=home">右向三级菜单</a>
<ul>
<li><a href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx" mce_href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx">功能2子菜单1</a></li>
<li><a href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx" mce_href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx">功能2子菜单2</a></li>
<li><a href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx" mce_href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx">功能2子菜单3</a></li>
<li><a href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx" mce_href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx">功能2子菜单4</a></li>
<li><a href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx" mce_href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx">功能2子菜单5</a></li>
<li><a href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx" mce_href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx">功能2子菜单6</a></li>
<li><a href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx" mce_href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx">功能2子菜单7</a></li>
<li><a class="hide" href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx" mce_href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx">右向三级菜单>></a>
<ul>
<li><a href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx" mce_href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx">三级菜单子菜单1</a></li>
<li><a href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx" mce_href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx">三级菜单子菜单2</a></li>
<li><a href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx" mce_href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx">三级菜单子菜单3</a></li>
<li><a href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx" mce_href="http://blog.csdn.net/Lethe1989/archive/2010/01/21/5219696.aspx">三级菜单子菜单4</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="hide" href="http://hi.csdn.net/space.php?do=home" mce_href="http://hi.csdn.net/space.php?do=home">左向三级菜单</a>
<ul>
<li><a href="http://hi.csdn.net/space.php?do=home" mce_href="http://hi.csdn.net/space.php?do=home">功能3子菜单1</a></li>
<li><a href="http://hi.csdn.net/space.php?do=home" mce_href="http://hi.csdn.net/space.php?do=home">功能3子菜单2</a></li>
<li><a class="hide" href="http://hi.csdn.net/space.php?do=home" mce_href="http://hi.csdn.net/space.php?do=home"><<左向三级菜单</a>
<ul class="left">
<li><a href="http://hi.csdn.net/space.php?do=home" mce_href="http://hi.csdn.net/space.php?do=home">三级菜单子菜单1</a></li>
<li><a href="http://hi.csdn.net/space.php?do=home" mce_href="http://hi.csdn.net/space.php?do=home">三级菜单子菜单2</a></li>
<li><a href="http://hi.csdn.net/space.php?do=home" mce_href="http://hi.csdn.net/space.php?do=home">三级菜单子菜单3</a></li>
</ul>
</li>
<li><a href="http://hi.csdn.net/space.php?do=home" mce_href="http://hi.csdn.net/space.php?do=home">功能3子菜单4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用DIV+CSS制作二级导航菜单(横向)
- cocos2dx-lua使用UIListView制作二级折叠菜单
- 使用纯JavaScript+CSS制作伸缩菜单
- 使用CSS 制作导航菜单
- 二级菜单在android模拟中无法使用，在真机上可以使用
- 简单 纯css 多级导航菜单 制作教程1 - 使用ul li 制作导航栏
- 纯DIV+CSS制作的下拉菜单，二级下拉菜单，三级下拉菜单(无JS)
- 纯DIV+CSS制作的下拉菜单，二级下拉菜单，三级下拉菜单
- DIV+CSS制作二级横向弹出菜单，略简单
- js+css二级菜单制作方法
- cocos2dx-lua使用UIListView制作二级折叠菜单
- div+css制作的水平三级横向弹出菜单
- 网页制作中规范使用DIV+CSS命名规则，可以改善优化功效特别是团队合作时候可以提供合作制作效率，具体DIV CSS命名规则CSS命名大全内容如下：
- 使用CSS 制作导航菜单 （一）
- CSS 制作的三级菜单
- 前端开发css实战：使用css制作网页中的多级菜单
- css制作三级菜单
- HTML案例—很讨巧的一种js+css制作hover模式展示二级菜单方法
- 使用css+js制作水平菜单