CSS二级下拉导航菜单
CSS配合JavaScript实现二级下拉导航菜单，好像CSS要配合JS才能写出好效果来，本款菜单同样用到了Js哦，菜单目前支持两级，下拉导航是我们经常用的一种菜单形式，把这个修改一下你就能用了，结构挺简单，相信你会做好的。
当前位置：编程学习 > 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">
<head>
<title>CSS二级下拉导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
body,html{padding:0;margin:0;text-align:center;font:normal 14px 'arial';}
#mainNavBar{width:100%;background:#999;padding:10px 0;}
#nav{width:760px;height:30px;margin:0 auto;}
#nav ul{padding:0;margin:0;}
#nav ul li{position:relative;float:left;width:60px;height:30px;line-height:30px;overflow:hidden;list-style-type:none;}
#nav ul li a{display:block;color:#fff;text-decoration:none;}
#nav ul li a:hover{font-weight:bold;background:#666;}
#subNav{position:absolute;width:150px;top:30px;left:0px;padding:5px;background:#666;color:#fff;text-align:left;}
#subNav a{text-decoration:none;font-weight:normal;display:block;}
#subNav a:hover{color:#f00;background:#f00;}
</style>
</head>
<body>
<div id="mainNavBar">
<div id="nav">
<ul>
<li>
<a href="#">添加</a>
<div id="subNav">
<a href="#">日志</a>
<a href="#">分类</a>
</div>
</li>
<li>
<a href="#">管理</a>
<div id="subNav">
<a href="#">分类</a>
<a href="#">文章</a>
</div>
</li>
<li>
<a href="#">扩展</a>
<div id="subNav">
<a href="#">评论管理</a>
<a href="#">留言管理</a>
<a href="#">注销退出</a>
</div>
</li>
</ul>
</div>
</div>
<script language="javascript">
var nav=document.getElementById("nav").getElementsByTagName("li");
for(i=0;i<nav.length;i++){
nav[i].onmouseover=function(){
this.style.fontWeight="bold";
this.style.overflow="visible";
this.style.background="#666666";
}
nav[i].onmouseout=function(){
this.style.fontWeight="normal";
this.style.background="#999999"
this.style.overflow="hidden";
}
}
</script>
</body>
</html>上一个：兼容好带缓冲的动感网页右键菜单
下一个：CSS导航菜单，三级菜单
- 更多JS疑问解答：
- 几个验证11位手机号码格式的js代码
- js如何获得FCKeditor控件的值
- 用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
- JS验证，这块“牛皮”反复修改都不能实现
- 在JS中使用DOM模型
- 如何用JS 获取本地文件夹的文件列表
- js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
- 求实现自动生成图片缩略图的JS代码
- JS脚本网页问题
- js，代码中"object"和"Object"区别？
- js+flash实现网页图片切换效果，出现边框，单击激活此控件。
- JS怎样操作PHP中的参数
- js 怎么在一打开页面就加载这个函数。
- Date.parse()的问题(js)
- <script src="/{maxcms:sitepath}js/common.js"></script>是什么意思