css 制作的三级菜单也可以当做二级菜单使用

最新推荐文章于 2024-07-05 14:02:55 发布

原创最新推荐文章于 2024-07-05 14:02:55 发布 · 1.9k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Web Html Css Js

本文提供了一个简单的三级菜单HTML实现方案，通过纯CSS样式控制，无需JavaScript即可完成菜单展开与收起的效果。文中给出了完整的HTML代码示例，并展示了如何通过修改CSS来定制菜单样式。

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

原理很简单就不详细介绍了，自己可以将代码拷贝了粘贴到txt中，更改后缀为htm，然后用浏览器打开即可

大致界面截图如下

请参见网址

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"></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>

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

标签

#css #2010 #class #border #xhtml