CSS二级下拉导航菜单

2024-09-05 12:20:41

字体：大中小

来源：转载

供稿：网友

CSS配合JavaScript实现二级下拉导航菜单，好像CSS要配合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>				添加				<div id="subNav">					日志					分类				</div>			</li>			<li>				管理				<div id="subNav">					分类					文章				</div>			</li>			<li>				扩展				<div id="subNav">					评论管理					留言管理					注销退出				</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>

上一篇：响应鼠标滚动的jQuery动感菜单

下一篇：单张背景图实现自适应宽度的CSS圆角菜单

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注