您的位置：首页 > 其它

设置导航栏下拉菜单

2013-06-05 16:38 176 查看
<!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></title>

<style type="text/css">

body { font-family: Verdana; font-size: 12px; line-height: 1.5; }

a { color: #000; text-decoration: none; }

a:hover { color: #F00; }

#menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;}

#menu ul { list-style: none; margin: 0px; padding: 0px; }

#menu ul li { float:left; margin-left:2px;}

#menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; font-size:14px;}

#menu ul li a#current { font-weight:bold; color:#fff;}

#menu ul li ul { border:1px solid #ccc; display:none; position:absolute;}

#menu ul li ul li { float:none; width:87px; background:#eee; margin:0;}

#menu ul li ul li a { background:none;}

#menu ul li ul li a:hover { background:#333; color:#fff;}

#menu ul li:hover ul { display:block;}

#menu ul li.sfhover ul { display:block;}

</style>

<script type="text/javascript"><!-- //--><![CDATA[//><!--

function menuFix() {

var sfEls = document.getElementById("menu").getElementsByTagName("li");

for (var i = 0; i < sfEls.length; i++) {

sfEls[i].onmouseover = 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("( ?|^)sfhover\\b"),

"");

}

}

}

window.onload = menuFix;

//--><!]]>

</script>

</head>

<body>

<div id="menu">

<ul>

<li><a id="current" href="#">首页</a></li>

<li><a href="#">网页版式</a>

<ul>

<li><a href="#">自适应宽度</a></li>

<li><a href="#">固定宽度</a></li>

</ul>

</li>

<li><a href="#">web教程</a>

<ul>

<li><a href="#">新手入门</a></li>

<li><a href="#">视频教程</a></li>

<li><a href="#">常见问题</a></li>

</ul>

</li>

<li><a href="#">web实例</a></li>

<li><a href="#">常用代码</a></li>

</ul>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航