css 二级菜单实现代码集合修正版

(编辑：jimmy 日期: 2025/5/13 浏览：3 次 )

<!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" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜单演示</title> <style type="text/css"> </style> </head> <body> <ul id="nav"> <li> <ul> <li>脚本专栏</li> <li>网络编程</li> <li>数据库</li> <li>源码下载</li> <li>软件下载</li> </ul> </li> <li>服务介绍 <ul> <li>服务二</li> <li>服务二</li> <li>服务二</li> <li>服务二服务二</li> <li>服务二服务二服务二</li> <li>服务二</li> </ul> </li> <li>成功案例 <ul> <li>案例三</li> <li>案例</li> <li>案例三案例三</li> <li>案例三案例三案例三</li> </ul> </li> <li>关于我们 <ul> <li>我们四</li> <li>我们四</li> <li>我们四</li> <li>我们四111</li> </ul> </li> <li>在线演示 <ul> <li>演示</li> <li>演示</li> <li>演示</li> <li>演示演示演示</li> <li>演示演示演示</li> <li>演示演示</li> <li>演示演示演示</li> <li>演示演示演示演示演示</li> </ul> </li> <li>联系我们 <ul> <li>联系联系联系联系联系</li> <li>联系联系联系</li> <li>联系</li> <li>联系联系</li> <li>联系联系</li> <li>联系联系联系</li> <li>联系联系联系</li> </ul> </li> </ul> </body> </html>
[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]
第二种方法：
其实，所谓的二级菜单都差不多，无非就是为二级菜单定义一个层，当鼠标放在一级菜单上的时候显示这个层，而将鼠标从一级菜单上移开时隐藏这个层。因此，通过这个经典的CSS二级菜单又可以衍生出很多种不同的二级菜单，其中一种如下图所示，弹簧式的。

<!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" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜单演示</title> <style type="text/css">  </style>  </head> <body> <ul id="nav"> <li>产品介绍 <ul> <li>产品一</li> <li>产品一</li> <li>产品一</li> <li>产品一</li> <li>产品一</li> <li>产品一</li> </ul> </li> <li>服务介绍 <ul> <li>服务二</li> <li>服务二</li> <li>服务二</li> <li>服务二服务二</li> <li>服务二服务二服务二</li> <li>服务二</li> </ul> </li> <li>成功案例 <ul> <li>案例三</li> <li>案例</li> <li>案例三案例三</li> <li>案例三案例三案例三</li> </ul> </li> <li>关于我们 <ul> <li>我们四</li> <li>我们四</li> <li>我们四</li> <li>我们四111</li> </ul> </li> <li>在线演示 <ul> <li>演示</li> <li>演示</li> <li>演示</li> <li>演示演示演示</li> <li>演示演示演示</li> <li>演示演示</li> <li>演示演示演示</li> <li>演示演示演示演示演示</li> </ul> </li> <li>联系我们 <ul> <li>联系联系联系联系联系</li> <li>联系联系联系</li> <li>联系</li> <li>联系联系</li> <li>联系联系</li> <li>联系联系联系</li> <li>联系联系联系</li> </ul> </li> </ul> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]
也可以竖着的二级菜单变成横着的，如下面两个图所示。

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]
以上几种菜单在IE、Firefox、Opera、Flock浏览器下运行通过，但是有一个问题，就是在一级菜单中单击鼠标后，二级菜单就不会消失了。这不能不说是一个bug啊。另外，还有一种横着的二级菜单，这个菜单如下图所示。该菜单在IE浏览器中运行通过，但在Firefox、Opera、 Flock浏览器中运行不正常。

<!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" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜单演示</title> <style type="text/css">  </style>  </head> <body> <ul id="nav"> <li>产品介绍 <ul> <li>产品一</li> <li>产品一</li> <li>产品一</li> <li>产品一</li> <li>产品一</li> <li>产品一</li> </ul> </li> <li>服务介绍 <ul> <li>服务二</li> <li>服务二</li> <li>服务二</li> <li>服务二服务二</li> <li>服务二服务二服务二</li> <li>服务二</li> </ul> </li> <li>成功案例 <ul> <li>案例三</li> <li>案例</li> <li>案例三案例三</li> <li>案例三案例三案例三</li> </ul> </li> <li>关于我们 <ul> <li>我们四</li> <li>我们四</li> <li>我们四</li> <li>我们四111</li> </ul> </li> <li>在线演示 <ul> <li>演示</li> <li>演示</li> <li>演示</li> <li>演示演示演示</li> <li>演示演示演示</li> <li>演示演示</li> <li>演示演示演示</li> <li>演示演示演示演示演示</li> </ul> </li> <li>联系我们 <ul> <li>联系联系联系联系联系</li> <li>联系联系联系</li> <li>联系</li> <li>联系联系</li> <li>联系联系</li> <li>联系联系联系</li> <li>联系联系联系</li> </ul> </li> </ul> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

以上文件打包下载

上一篇：event对象的方法兼容多浏览器
下一篇：js AspxButton的客户端操作

css 二级菜单 实现代码集合 修正版

css 二级菜单实现代码集合修正版