css二级下拉菜单
文章提供一款精的css教程二级下拉菜单效果,当然很多朋友喜欢css实现圆角效果,我们就利用了图片来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">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>css二级下拉菜单</title>
<link href="style/index.css" type="text/css" rel="stylesheet">
<script type=text/网页特效><!--//--><![cdata[//><!--
function menufix() {
var sfels = document.getelementbyid("nav").getelementsbytagname("li");
for (var i=0; i<sfels.length; i++) {
sfels[i].onmouseo教程ver=function() {
this.classname+=(this.classname.length>0? " ": "") + "sfhover";
}
sfels[i].onmousedown=function() {
this.classname+=(this.classname.length>0? " ": "") + "sfhover";
}
sfels[i].onmouseup=function() {
this.classname+=(this.classname.length>0? " ": "") + "sfhover";
}
sfels[i].onmouseout=function() {
this.classname=this.classname.replace(new regexp("( ?|^)sfhoverb"),
"");
}
}
}
window.onload=menufix;
//more javascript from http://www.webjx.com
//--><!]]></script></head>
<body>
<div id="container">
<div class="outframe_header">
<div class="jmlogo">
<a href="http://www.111cn.net"><img src="images/logo.gif" /></a>
</div>
<div class="box">
<div class="part01">
<div class="jmsubnav">
<a href="http://www.111cn.net">返回首页</a><a href="http://www.111cn.net">加入收藏</a><a href="http://www.111cn.net" class="last">网站地图</a>
</div>
<div class="jmsearch" name="gsearcharea">
<input type="hidden" class="url" value="" />
<button type="button" name="submit">
搜索
</button>
<input type="text" class="searchitem" title="请输入搜索标题" />
</div>
</div>
<div class="jmnav">
<ul id="nav">
<li class="top"><a href="http://www.111cn.net">网聚传播</a>
<ul>
<li class="top01"></li>
<li><a href="http://www.111cn.net">广州新怡</a></li>
<li><a href="http://www.111cn.net">捷成汽配</a></li>
<li><a href="http://www.111cn.net">东莞汽配</a></li><li class="bot01"></li>
</ul>
</li>
<li class="top"><a href="http://www.111cn.net">广州简美</a>
<ul>
<li class="top01"></li>
<li><a href="http://www.111cn.net">广州新怡</a></li>
<li><a href="http://www.111cn.net">广州新怡</a></li>
<li><a href="http://www.111cn.net">广州新怡 </a></li>
<li><a href="http://www.111cn.net">广州新怡</a></li>
<li><a href="http://www.111cn.net">捷成汽配</a></li>
<li><a href="http://www.111cn.net">东莞汽配</a></li>
<li><a href="http://www.111cn.net">东莞汽配</a></li>
<li class="bot01"></li>
</ul>
</li>
<li class="top"><a href="http://www.alixixi.com">阿里西西</a>
<ul>
<li class="top01"></li>
<li><a href="http://www.alixixi.com">同城团购</a></li>
<li><a href="http://www.alixixi.com">同城团购</a></li>
<li><a href="http://www.alixixi.com">同城团购</a></li>
<li><a href="http://www.alixixi.com">同城团购</a></li>
<li class="bot01"></li>
</ul>
</li>
<li class="top topa"><a href="http://www.111cn.net">脚本之家</a>
<ul>
<li class="top01"></li>
<li><a href="http://www.111cn.net">脚本之家</a></li>
<li><a href="http://www.111cn.net">脚本之家</a></li>
<li><a href="http://www.111cn.net">脚本之家</a></li>
<li><a href="http://www.111cn.net">脚本之家</a></li>
<li class="bot01"></li>
</ul>
</li>
<li class="top topb"><a href="http://www.111cn.net">广州网页制作</a>
<ul>
<li class="top01 top02"></li>
<li><a href="http://www.111cn.net">网页制作</a></li>
<li><a href="http://www.111cn.net">网页设计</a></li>
<li><a href="http://www.111cn.net">网页制作</a></li>
<li><a href="http://www.111cn.net">网页设计</a></li>
<li class="bot01"></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
源码下载地址
http://down.111cn.net/js/css/2010/0928/20963.html
效果预览地址
http://g.111cn.cn/javascript/code/20100927/css1/