加载中…
用CSS+DIV实现下拉菜单效果
(2007-07-24 15:18:17)| 分类： web css |
工作需要网上找来，放在博上，只为自己更好记录
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<metahttp-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Flyweの Blog - 用CSS+DIV实现下拉菜单效果（一）</title>
<styletype="text/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;
}
#nava {
display:block; width: 80px; text-align:center;
}
#nava:link {
color:#666;text-decoration:none;
}
#nava:visited {
color:#666;text-decoration:none;
}
#nava:hover {
color:#FFF;text-decoration:none;font-weight:bold;
}
#navli {
float:left; width: 80px; background:#CCC;
}
#navli a:hover{
background:#999;
}
#navli ul {
line-height:27px; list-style-type: none;text-align:left;
left:-999em; width: 180px; position: absolute;
}
#navli ul li{
float:left; width: 180px;
background:#F6F6F6;
}
#navli ul a{
display:block; width: 156px;text-align:left;padding-left:24px;
}
#navli ul a:link {
color:#666;text-decoration:none;
}
#navli ul a:visited {
color:#666;text-decoration:none;
}
#navli ul a:hover {
color:#F3F3F3;text-decoration:none;font-weight:normal;
background:#C00;
}
#navli:hover ul {
left:auto;
}
#navli.sfhover ul {
left:auto;
}
#content{
clear:left;
}
-->
</style>
<scripttype=text/javascript>
<!--//--><![CDATA[//><!--
functionmenuFix() {
varsfEls = document.getElementByIdx("nav").getElementsByTagName_r("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(newRegExp("( ?|^)sfhover\\b"),
"");
}
}
}
window.onload=menuFix;
//--><!]]>
</script>
</head>
<body>
<ulid="nav">
<li><ahref="#">产品介绍</a>
<ul>
<li><ahref="#">产品一</a></li>
<li><ahref="#">产品一</a></li>
<li><ahref="#">产品一</a></li>
<li><ahref="#">产品一</a></li>
<li><ahref="#">产品一</a></li>
<li><ahref="#">产品一</a></li>
</ul>
</li>
<li><ahref="#">服务介绍</a>
<html
<head>
<meta
<title>Flywe
<style
<!--
*{margin:0;padding:0;border:0;}
body
font-family:
font-size:12px;
}
#nav
line-height:
}
#nav
display:
}
#nav
color:#666;
}
#nav
color:#666;text-decoration:none;
}
#nav
color:#FFF;text-decoration:none;font-weight:bold;
}
#nav
float:
}
#nav
background:#999;
}
#nav
line-height:
left:
}
#nav
float:
background:
}
#nav
display:
}
#nav
color:#666;
}
#nav
color:#666;text-decoration:none;
}
#nav
color:#F3F3F3;text-decoration:none;font-weight:normal;
background:#C00;
}
#nav
left:
}
#nav
left:
}
#content
clear:
}
-->
</style>
<script
<!--//--><![CDATA[//><!--
function
var
for
sfEls[i].onmouseover=function()
this.className+=(this.className.length>0?
}
sfEls[i].onMouseDown=function()
this.className+=(this.className.length>0?
}
sfEls[i].onMouseUp=function()
this.className+=(this.className.length>0?
}
sfEls[i].onmouseout=function()
this.className=this.className.replace(new
"");
}
}
}
window.onload=menuFix;
//--><!]]>
</script>
</head>
<body>
<ul
<li><a
<ul>
<li><a
<li><a
<li><a
<li><a
<li><a
<li><a
</ul>
</li>
<li><a