好用的CSS下拉菜单源码介绍
好用的CSS下拉菜单源码介绍
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>网页特效|http://homepage.yesky.com/|---CSS制作的三级菜单</title>
<styletype="text/css">
<!--
body{
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
}
#menu{
background-color:#FEF0E5;
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF',endColorStr='#FEF0E5',gradientType='0');
}
#nav,#navul{
float:left;/*菜单总体水平位置*/
clear:right;
list-style:none;
/*line-height:22px;一级菜单高*/
/*background:#eee;所有菜单移出色*/
/*font-weight:bold;8*/
padding:0px;
margin:0px;
/*border:1pxsolid#ccc;
border-right:0px;*/
}
#navulul{
/*border:1pxsolid#ccc;*/
border-top:0px;
border-right:0px;
}
#nava{
width:120px;
display:block;
color:#333;
text-decoration:none;
text-align:left;
/*border-right:1pxsolid#CCC;*/
padding:3px4px3px7px;
}
#nava:hover{
color:#000;
border:1pxsolid#CCC;
margin:0px;
padding:3px5px3px6px;
background-color:#f1f1f1;
text-decoration:none;
}/*所有a:hover字体样式*/
#nava.selected{background:url(flyout_arrow.gif)no-repeatright50%;}/*下拉图标*/
#navli{
float:none;
clear:right;
height:22px;
width:120px;
}
#navliulli{
float:none;
clear:right;
height:22px;
width:120px;
}
#navliul{/*二级弹出位*/
position:absolute;
margin:-22px0px0px119px;
padding:0;
left:-9999em;
width:120px;
font-weight:normal;
display:block;
border:1pxsolid#CCCCCC;
background:#fff;
}
/*二级菜单宽*/
#navliula{
width:120px;/*二级菜单宽*/
/*line-height:24px;二级菜单高
border:1pxsolid#CCC;*/
height:22px;
text-align:left;
margin:0px;
}
#navliulul{
margin:-22px0px0px120px;
border:1pxsolid#CCC;
}/*三级弹出位*/
#navli:hoverulul,#navli.sfhoverulul{left:-9999em;}
#navli:hoverul,#navlili:hoverul,#navli.sfhoverul,#navlili.sfhoverul{
left:auto;
height:22px;
}/*所有弹出菜单自动左边距*/
#navli:hover,#navli.sfhover{
background:#f1f1f1;
height:22px;
}
/*所有悬浮样式*/
-->
</style>
<scripttype="text/javascript"><!--//--><![CDATA[//><!--
img1=newImage();
img1.src="flyout_arrow.gif";
sfHover=function(){
varsfEls=document.getElementById("nav").getElementsByTagName("LI");
for(vari=0;i<sfEls.length;i++){
sfEls[i].onmouseover=function(){
this.className+="sfhover";
}
sfEls[i].onmouseout=function(){
this.className=this.className.replace(newRegExp("sfhover/b"),"");
}
}
}
window.onload=sfHover;
//--><!]]></script>
</head>
<body>
<tablewidth="120"border="0"cellspacing="0"cellpadding="0">
<tr>
<tdvalign="top"id="menu">
<ulid="nav">
<li><ahref="http://www.whsong.com"target="_blank">
<spanstyle="font-size:9pt">首页</span></a></li>
<li><ahref="http://www.whsong.com/"target="_blank"class="selected">
<spanstyle="font-size:9pt">项目需求合作</span></a><spanstyle="font-size:9pt">
</span>
<ul>
<li><ahref="http://www.whsong.com/"class="selected"><spanstyle="font-size:9pt">网站项目
</span></a>
<ul>
<li><ahref="http://www.whsong.com/">
<spanstyle="font-size:9pt">网站项目</span></a>
<li><ahref="http://www.whsong.com/">
<spanstyle="font-size:9pt">整站项目</span></a></li>
<li><ahref="http://www.whsong.com/">
<spanstyle="font-size:9pt">网站分析策划</span></a></li>
<li><ahref="http://www.whsong.com/"target="_blank">
<spanstyle="font-size:9pt">网页设计制作</span></a></li>
<li><ahref="http://www.whsong.com/">
<spanstyle="font-size:9pt">网站制作与开发</span></a></li>
<li><ahref="http://www.whsong.com/">
<spanstyle="font-size:9pt">网站flash动画</span></a></li>
<li><ahref="http://www.whsong.com/">
<spanstyle="font-size:9pt">网站服务器</span></a></li>
</ul>
</li>
<li><ahref="http://www.whsong.com/"class="selected"><spanstyle="font-size:9pt">多媒体设计制作</span></a><spanstyle="font-size:9pt">
</span>
<ul>
<li><ahref="http://www.whsong.com/">
<spanstyle="font-size:9pt">网站项目</span></a>
<li><ahref="http://www.whsong.com/">
<spanstyle="font-size:9pt">平面设计
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>网页特效|http://homepage.yesky.com/|---CSS制作的三级菜单</title>
<styletype="text/css">
<!--
body{
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
}
#menu{
background-color:#FEF0E5;
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF',endColorStr='#FEF0E5',gradientType='0');
}
#nav,#navul{
float:left;/*菜单总体水平位置*/
clear:right;
list-style:none;
/*line-height:22px;一级菜单高*/
/*background:#eee;所有菜单移出色*/
/*font-weight:bold;8*/
padding:0px;
margin:0px;
/*border:1pxsolid#ccc;
border-right:0px;*/
}
#navulul{
/*border:1pxsolid#ccc;*/
border-top:0px;
border-right:0px;
}
#nava{
width:120px;
display:block;
color:#333;
text-decoration:none;
text-align:left;
/*border-right:1pxsolid#CCC;*/
padding:3px4px3px7px;
}
#nava:hover{
color:#000;
border:1pxsolid#CCC;
margin:0px;
padding:3px5px3px6px;
background-color:#f1f1f1;
text-decoration:none;
}/*所有a:hover字体样式*/
#nava.selected{background:url(flyout_arrow.gif)no-repeatright50%;}/*下拉图标*/
#navli{
float:none;
clear:right;
height:22px;
width:120px;
}
#navliulli{
float:none;
clear:right;
height:22px;
width:120px;
}
#navliul{/*二级弹出位*/
position:absolute;
margin:-22px0px0px119px;
padding:0;
left:-9999em;
width:120px;
font-weight:normal;
display:block;
border:1pxsolid#CCCCCC;
background:#fff;
}
/*二级菜单宽*/
#navliula{
width:120px;/*二级菜单宽*/
/*line-height:24px;二级菜单高
border:1pxsolid#CCC;*/
height:22px;
text-align:left;
margin:0px;
}
#navliulul{
margin:-22px0px0px120px;
border:1pxsolid#CCC;
}/*三级弹出位*/
#navli:hoverulul,#navli.sfhoverulul{left:-9999em;}
#navli:hoverul,#navlili:hoverul,#navli.sfhoverul,#navlili.sfhoverul{
left:auto;
height:22px;
}/*所有弹出菜单自动左边距*/
#navli:hover,#navli.sfhover{
background:#f1f1f1;
height:22px;
}
/*所有悬浮样式*/
-->
</style>
<scripttype="text/javascript"><!--//--><![CDATA[//><!--
img1=newImage();
img1.src="flyout_arrow.gif";
sfHover=function(){
varsfEls=document.getElementById("nav").getElementsByTagName("LI");
for(vari=0;i<sfEls.length;i++){
sfEls[i].onmouseover=function(){
this.className+="sfhover";
}
sfEls[i].onmouseout=function(){
this.className=this.className.replace(newRegExp("sfhover/b"),"");
}
}
}
window.onload=sfHover;
//--><!]]></script>
</head>
<body>
<tablewidth="120"border="0"cellspacing="0"cellpadding="0">
<tr>
<tdvalign="top"id="menu">
<ulid="nav">
<li><ahref="http://www.whsong.com"target="_blank">
<spanstyle="font-size:9pt">首页</span></a></li>
<li><ahref="http://www.whsong.com/"target="_blank"class="selected">
<spanstyle="font-size:9pt">项目需求合作</span></a><spanstyle="font-size:9pt">
</span>
<ul>
<li><ahref="http://www.whsong.com/"class="selected"><spanstyle="font-size:9pt">网站项目
</span></a>
<ul>
<li><ahref="http://www.whsong.com/">
<spanstyle="font-size:9pt">网站项目</span></a>
<li><ahref="http://www.whsong.com/">
<spanstyle="font-size:9pt">整站项目</span></a></li>
<li><ahref="http://www.whsong.com/">
<spanstyle="font-size:9pt">网站分析策划</span></a></li>
<li><ahref="http://www.whsong.com/"target="_blank">
<spanstyle="font-size:9pt">网页设计制作</span></a></li>
<li><ahref="http://www.whsong.com/">
<spanstyle="font-size:9pt">网站制作与开发</span></a></li>
<li><ahref="http://www.whsong.com/">
<spanstyle="font-size:9pt">网站flash动画</span></a></li>
<li><ahref="http://www.whsong.com/">
<spanstyle="font-size:9pt">网站服务器</span></a></li>
</ul>
</li>
<li><ahref="http://www.whsong.com/"class="selected"><spanstyle="font-size:9pt">多媒体设计制作</span></a><spanstyle="font-size:9pt">
</span>
<ul>
<li><ahref="http://www.whsong.com/">
<spanstyle="font-size:9pt">网站项目</span></a>
<li><ahref="http://www.whsong.com/">
<spanstyle="font-size:9pt">平面设计