css 二级菜单实现代码集合修正版-技术开发JavaScript技术-Ubuntu系统_Ubuntu服务器

<!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><span>脚本专栏</span></li> <li><span><a href=/pingce/wangluo/ target=_blank class=infotextkey>网络</a>编程</span></li> <li><span>数据库</span></li> <li><span>源码下载</span></li> <li><span>软件下载</span></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需刷新才能执行]
也可以竖着的二级菜单变成横着的，如下面两个图所示。

<!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需刷新才能执行]

<!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需刷新才能执行]
以上几种菜单在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需刷新才能执行]

以上脚本之家文件打包下载

JavaScript技术：css 二级菜单实现代码集合修正版，转载需保留来源！

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

相关文章阅读