CSS+JS黑色横向三级导航条

2024-09-05 12:19:22

字体：大中小

来源：转载

供稿：网友

CSS+JavaScript横向黑色导航条，看上去很酷，三级折叠、展开。使用LI列表。符合W3C WEB标准，复制到你的网页中就可用了，很舒服的导航菜单。

<!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=gb2312" /><title>黑色多级弹出菜单</title><style>body {margin: 7px;font:12px Verdana, Arial, Helvetica, sans-serif;}* {list-style-type: none;margin: 0px;padding: 0px;border: thin none;}#nav {position: absolute;font-size: 11px;opacity: 0.8;}#nav a {display: block;width: 100px;height: 15px;padding: 3px 5px 12px;background: #666;color: #fff;text-decoration: none;}#nav a:hover {background: #333;}#nav li {float: left;clear: left;width: 120px;background: #ccc;padding-bottom: 3px;}#nav ul {position: absolute;margin-left: 115px;margin-top: -30px;}#nav ul {display: none;}#nav li.show ul {display: block;}#nav li.show li ul {display: none;}#nav li li.show ul {display: block;}</style><script language="javascript" type="text/javascript">function menuFix() {var sfEls = document.getElementById("nav").getElementsByTagName("li");for (var i=0; i<sfEls.length; i++) {sfEls[i].onmouseover=function() {this.className+=(this.className.length>0? " ": "") + "show";}sfEls[i].onmouseout=function() {this.className=this.className.replace(new RegExp("( ?|^)show//b"), "");}}}window.onload=menuFix;</script></head><body><ul id="nav"><li>Main Page<ul><li>Lasted Update<ul><li>Class</li><li>New Update</li></ul></li><li>ASP<ul><li>聊天留言</li><li>企业建站</li><li>论坛社区</li><li>新闻文章</li><li>博客日记</li><li>CMS系统</li><li>学校政府</li><li>影音视频</li><li></ul></li><li>PHP<ul><li>聊天留言</li><li>企业建站</li><li>论坛社区</li><li>新闻文章</li><li>博客日记</li><li>CMS系统</li><li>学校政府</li><li>影音视频</li><li></ul></li><li>Delphi<ul><li>游戏娱乐</li><li>媒体网络</li><li>窗体界面</li><li>算法相关</li><li>系统相关</li></ul></li></ul></li><li>VC++<ul><li>游戏娱乐</li><li>媒体网络</li><li>窗体界面</li><li>算法相关</li><li>系统相关</li></ul></li><li>Java<ul><li>游戏娱乐</li><li>媒体网络</li><li>窗体界面</li><li>算法相关</li><li>系统相关</li></ul></li></ul></body></html>

上一篇：二级菜单居中的横向CSS下拉菜单

下一篇：鼠标滑过变色的菜单栏

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注