css导航下拉菜单特效

2010-10-11 11:05:09 div css下拉导航菜单（图+演示），div css下拉导航菜单,css导航菜单下拉

div css下拉导航菜单（图+演示），div css下拉导航菜单,css导航菜单下拉

CSS导航菜单（CSS下拉菜单演示图）

查看演示-CSS下拉菜单样式：//www.html8.com.cn/fanli/divcss下拉导航菜单/
以下有DIV CSS下拉菜单打包源文件下载。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV CSS下拉菜单-HTML8</title>
<LINK href="ddsmoothmenu.css" type=text/css rel=stylesheet>
<SCRIPT src="jquery-1.3.2.min.js" type=text/javascript></SCRIPT>
<SCRIPT src="ddsmoothmenu.js" type=text/javascript></SCRIPT>

</head>
<body>
<DIV class=ddsmoothmenu id=smoothmenu1>
<UL>
<LI><A href="//www.html8.com.cn/">css</A>
</LI>
<LI><A href="//www.html8.com.cn/">DIV+CSS</A>
<UL>
<LI><A href="//www.html8.com.cn/shouce/">css手册</A> </LI>
<LI><A href="//www.html8.com.cn/css3">css3手册</A> </LI>
<LI><A href="//www.html8.com.cn/css/">CSS工具</A> </LI>
<LI><A href="//www.html8.com.cn/">css教程</A> </LI>
<LI><A href="//www.html8.com.cn/css/">css hack</A>
</LI>
<LI><A href="//www.html8.com.cn/css/" title="css模板">css模块</A>
</LI></UL></LI>
<LI><A href="//www.html8.com.cn/">div css</A>
<UL>
<LI><A href="//www.html8.com.cn/css/">div css基础</A> </LI>
<LI><A href="//www.html8.com.cn/html/">html基础</A> </LI>
<LI><A href="//www.html8.com.cn/css/">div css标准</A> </LI>
<LI><A href="//www.html8.com.cn/css/83.html">css验证</A> </LI>
<LI><A href="//www.html8.com.cn/css/83.html">w3c验证</A>
</LI></UL></LI>
<LI><A href="//www.html8.com.cn/">CSS制作</A>
<UL>
<LI><A href="//www.html8.com.cn/">div css重构</A> </LI>
<LI><A href="//www.html8.com.cn/">css制作价格</A> </LI>
<LI><A href="//www.html8.com.cn/">网页重构</A> </LI>
<LI><A href="//www.html8.com.cn/">div切图</A> </LI>
<LI><A href="//www.html8.com.cn/">div+css教程</A>
</LI></UL></LI>
<LI><A href="//www.html8.com.cn/">CSS切图</A>
<UL>
<LI><A href="//www.html8.com.cn/">div+css切图</A> </LI>
<LI><A href="//www.html8.com.cn/">css div切图</A> </LI>
<LI><A href="//www.html8.com.cn/">css切图</A> </LI>
<LI><A href="//www.html8.com.cn/">图片转div</A> </LI>
<LI><A href="//www.html8.com.cn/">div css切图</A>
</LI></UL></LI>
<LI><A href="//www.html8.com.cn/shouce/">CSS手册</A>
<UL>
<LI><A href="//www.html8.com.cn/shouce">css2手册</A> </LI>
<LI><A href="//www.html8.com.cn/css3">css3手册</A> </LI>
<LI><A href="//www.html8.com.cn/shouce">CSS在线手册</A> </LI>
<LI><A href="//www.html8.com.cn/css-editor.html">css编辑器</A> </LI>
<LI><A href="//www.html8.com.cn/">div</A>
</LI></UL></LI>

</UL>
</DIV>
</body>
</html>

css代码：

 /* html8.com.cn css */ 
 
.ddsmoothmenu { 
MARGIN: 0px auto; FONT: 12px Verdana; WIDTH: 730px 
} 
.ddsmoothmenu UL { 
PADDING-RIGHT: 0px; PADDING-LEFT: 0px;BACKGROUND: #2b9801; 
Z-INDEX: 100; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; 
PADDING-TOP: 0px; LIST-STYLE-TYPE: none 
} 
.ddsmoothmenu UL LI { 
DISPLAY: block; FLOAT: left; WIDTH: 81px; LINE-HEIGHT: 31px; 
POSITION: relative; TEXT-ALIGN: center 
} 
HTML .ddsmoothmenu UL LI { 
FLOAT: left; WIDTH: 81px; LINE-HEIGHT: 31px; POSITION: relative; TEXT-ALIGN: center 
} 
.ddsmoothmenu UL LI A { 
DISPLAY: block; FONT-WEIGHT: bold; WIDTH: 81px; TEXT-DECORATION: none 
} 
.ddsmoothmenu UL LI A:link { 
COLOR: #fff 
} 
.ddsmoothmenu UL LI A:visited { 
COLOR: #fff 
} 
.ddsmoothmenu UL LI A:hover { 
COLOR: #ffff00 
} 
.ddsmoothmenu UL LI UL { 
LEFT: 0px; VISIBILITY: hidden; POSITION: absolute 
} 
.ddsmoothmenu UL LI UL LI { 
BACKGROUND: #2b9801; FLOAT: left; WIDTH: 81px; LINE-HEIGHT: 25px;
 BORDER-BOTTOM: #96d47d 1px solid 
} 
.ddsmoothmenu UL LI UL LI A { 
DISPLAY: block; WIDTH: 81px; TEXT-DECORATION: none 
} 
.ddsmoothmenu UL LI UL LI A:hover { 
BACKGROUND: #51b228 
} 
.ddsmoothmenu UL LI UL LI UL { 
TOP: 0px 
} 
.downarrowclass { 
DISPLAY: none; POSITION: absolute 
} 
.rightarrowclass { 
DISPLAY: none; POSITION: absolute 
} 
.ddshadow { 
BACKGROUND: silver; LEFT: 0px; WIDTH: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 0px 
} 
.toplevelshadow { 
opacity: 0.8 
}

JS代码-直接下载打包文件即可！
查看演示：//www.html8.com.cn/fanli/divcss下拉导航菜单/
DIV+CSS+JS经典导航条-下拉菜单下载-下载CSS下拉型导航菜单：

立即下载（23.764KB）