您的位置:首页 > DIV CSS模块 >

 

div css下拉导航菜单(图+演示+下载)

 

div css下拉导航菜单(图+演示),div css下拉导航菜单,css导航菜单下拉
 

div+css下拉导航菜单演示图
CSS导航菜单(CSS下拉菜单演示图)

 

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

HTML代码如下:

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV CSS下拉菜单-css5</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>
<!-- www.css5.com CSS教程 更多CSS模板 -->
</head>
<body>
<DIV class=ddsmoothmenu id=smoothmenu1>
<UL>
<LI><A href="http://www.css5.com.cn/">css</A>
</LI>
<LI><A href="http://www.css5.com.cn/">DIV+CSS</A>
<UL>
<LI><A href="http://www.css5.com.cn/shouce/">css手册</A> </LI>
<LI><A href="http://www.css5.com.cn/css3">css3手册</A> </LI>
<LI><A href="http://www.css5.com.cn/tools/">CSS工具</A> </LI>
<LI><A href="http://www.css5.com.cn/">css教程</A> </LI>
<LI><A href="http://www.css5.com.cn/jianrong/">css hack</A>
</LI>
<LI><A href="http://www.css5.com.cn/mokuai/" title="css模板">css模块</A>
</LI></UL></LI>
<LI><A href="http://www.css5.com.cn/">div css</A>
<UL>
<LI><A href="http://www.css5.com.cn/css/">div css基础</A> </LI>
<LI><A href="http://www.css5.com.cn/html/">html基础</A> </LI>
<LI><A href="http://www.css5.com.cn/w3c/">div css标准</A> </LI>
<LI><A href="http://www.css5.com.cn/tools/83.html">css验证</A> </LI>
<LI><A href="http://www.css5.com.cn/tools/83.html">w3c验证</A>
</LI></UL></LI>
<LI><A href="http://www.css5.com.cn/">CSS制作</A>
<UL>
<LI><A href="http://www.css5.com.cn/">div css重构</A> </LI>
<LI><A href="http://www.css5.com.cn/">css制作价格</A> </LI>
<LI><A href="http://www.css5.com.cn/">网页重构</A> </LI>
<LI><A href="http://www.css5.com.cn/">div切图</A> </LI>
<LI><A href="http://www.css5.com.cn/">div+css教程</A>
</LI></UL></LI>
<LI><A href="http://www.css5.com.cn/">CSS切图</A>
<UL>
<LI><A href="http://www.css5.com.cn/">div+css切图</A> </LI>
<LI><A href="http://www.css5.com.cn/">css div切图</A> </LI>
<LI><A href="http://www.css5.com.cn/">css切图</A> </LI>
<LI><A href="http://www.css5.com.cn/">图片转div</A> </LI>
<LI><A href="http://www.css5.com.cn/">div css切图</A>
</LI></UL></LI>
<LI><A href="http://www.css5.com.cn/shouce/">CSS手册</A>
<UL>
<LI><A href="http://www.css5.com.cn/shouce">css2手册</A> </LI>
<LI><A href="http://www.css5.com.cn/css3">css3手册</A> </LI>
<LI><A href="http://www.css5.com.cn/shouce">CSS在线手册</A> </LI>
<LI><A href="http://www.css5.com.cn/css-editor.html">css编辑器</A> </LI>
<LI><A href="http://www.css5.com.cn/">div</A>
</LI></UL></LI>

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


 

css代码

  1.  /* www.css5.com css */ 
  2.  
  3. .ddsmoothmenu { 
  4. MARGIN: 0px auto; FONT: 12px Verdana; WIDTH: 730px 
  5. .ddsmoothmenu UL { 
  6. 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 
  7. .ddsmoothmenu UL LI { 
  8. DISPLAY: block; FLOAT: left; WIDTH: 81px; LINE-HEIGHT: 31px; 
    POSITION: relative; TEXT-ALIGN: center 
  9. HTML .ddsmoothmenu UL LI { 
  10. FLOAT: left; WIDTH: 81px; LINE-HEIGHT: 31px; POSITION: relative; TEXT-ALIGN: center 
  11. .ddsmoothmenu UL LI A { 
  12. DISPLAY: block; FONT-WEIGHT: bold; WIDTH: 81px; TEXT-DECORATION: none 
  13. .ddsmoothmenu UL LI A:link { 
  14. COLOR: #fff 
  15. .ddsmoothmenu UL LI A:visited { 
  16. COLOR: #fff 
  17. .ddsmoothmenu UL LI A:hover { 
  18. COLOR: #ffff00 
  19. .ddsmoothmenu UL LI UL { 
  20. LEFT: 0px; VISIBILITY: hidden; POSITION: absolute 
  21. .ddsmoothmenu UL LI UL LI { 
  22. BACKGROUND: #2b9801; FLOAT: left; WIDTH: 81px; LINE-HEIGHT: 25px;
     BORDER-BOTTOM: #96d47d 1px solid 
  23. .ddsmoothmenu UL LI UL LI A { 
  24. DISPLAY: block; WIDTH: 81px; TEXT-DECORATION: none 
  25. .ddsmoothmenu UL LI UL LI A:hover { 
  26. BACKGROUND: #51b228 
  27. .ddsmoothmenu UL LI UL LI UL { 
  28. TOP: 0px 
  29. .downarrowclass { 
  30. DISPLAY: none; POSITION: absolute 
  31. .rightarrowclass { 
  32. DISPLAY: none; POSITION: absolute 
  33. .ddshadow { 
  34. BACKGROUND: silver; LEFT: 0px; WIDTH: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 0px 
  35. .toplevelshadow { 
  36. opacity: 0.8 

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

立即下载 (23.764KB

标签(Tag): 导航条 下拉菜单 css导航 css下拉菜单
本文分享URL地址:http://www.css5.com.cn/mokuai/224.html

更多

 

CSS必备基础教程 - TOP

 

热门信息

 

CSS5更新 - TOP

 

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解。
CSS教程文章修订日期::2010-10-11     点击:
原创:CSS5     来源网址:http://www.css5.com.cn/mokuai/224.html
本文www.css5.com.cn(DIV CSS) CSS5版权所有,欢迎转载,并注明出处来源及URL!