div+css小拉导航_html/css_WEB-ITnose

css下拉菜单演示

* { margin:0; padding:0; border:0; }
body { font-family: arial, 宋体, serif; font-size:12px; }
#nav { line-height: 24px; list-style-type: none; background:#666; }
#nav a { display: block; width: 80px; text-align:center; }
#nav a:link { color:#666; text-decoration:none; }
#nav a:visited { color:#666; text-decoration:none; }
#nav a:hover { color:#FFF; text-decoration:none; font-weight:bold; }
#nav li { float: left; width: 80px; background:#CCC; }
#nav li a:hover { background:#999; }
#nav li ul { line-height: 27px; list-style-type: none; text-align:left; left: -999em; width: 180px; position: absolute; }
#nav li ul li { float: left; width: 180px; background: #F6F6F6; }
#nav li ul a { display: block; width: 180px; w\idth: 156px; text-align:left; padding-left:24px; }
#nav li ul a:link { color:#666; text-decoration:none; }
#nav li ul a:visited { color:#666; text-decoration:none; }
#nav li ul a:hover { color:#F3F3F3; text-decoration:none; font-weight:normal; background:#C00; }
#nav li:hover ul { left: auto; }
#nav li.sfhover ul { left: auto; }
#content { clear: left; }
-->

function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; 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;

//-->



产品介绍

产品一
产品一
产品一
产品一
产品一
产品一


服务介绍

服务二
服务二
服务二
服务二服务二
服务二服务二服务二
服务二


成功案例

案例三
案例
案例三案例三
案例三案例三案例三


关于我们

我们四
我们四
我们四
我们四111


在线演示

演示
演示
演示
演示演示演示
演示演示演示
演示演示
演示演示演示
演示演示演示演示演示


联系我们

联系联系联系联系联系
联系联系联系
联系
联系联系
联系联系
联系联系联系
联系联系联系

查看更多关于div+css小拉导航_html/css_WEB-ITnose的详细内容...