欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

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

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

 

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

HTML代码如下:

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV CSS下拉菜单-DIVCSS5</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.divcss5.com CSS教程 更多CSS模板 -->
</head>
<body>
<DIV class=ddsmoothmenu id=smoothmenu1>
<UL>
<LI><A href="http://www.divcss5.com/">css</A>
</LI>
<LI><A href="http://www.divcss5.com/">DIV+CSS</A>
<UL>
<LI><A href="http://www.divcss5.com/shouce/">css手册</A> </LI>
<LI><A href="http://www.divcss5.com/css3">css3手册</A> </LI>
<LI><A href="http://www.divcss5.com/css-tool/">CSS工具</A> </LI>
<LI><A href="http://www.divcss5.com/">css教程</A> </LI>
<LI><A href="http://www.divcss5.com/css-hack/">css hack</A>
</LI>
<LI><A href="http://www.divcss5.com/template/" title="css模板">css模块</A>
</LI></UL></LI>
<LI><A href="http://www.divcss5.com/">div css</A>
<UL>
<LI><A href="http://www.divcss5.com/rumen/">div css基础</A> </LI>
<LI><A href="http://www.divcss5.com/html/">html基础</A> </LI>
<LI><A href="http://www.divcss5.com/w3c/">div css标准</A> </LI>
<LI><A href="http://www.divcss5.com/css-tool/t83.html">css验证</A> </LI>
<LI><A href="http://www.divcss5.com/css-tool/t83.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.divcss5.com/">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.divcss5.com/shouce/">CSS手册</A>
<UL>
<LI><A href="http://www.divcss5.com/shouce">css2手册</A> </LI>
<LI><A href="http://www.divcss5.com/css3">css3手册</A> </LI>
<LI><A href="http://www.divcss5.com/shouce">CSS在线手册</A> </LI>
<LI><A href="http://www.divcss5.com/css-editor.html">css编辑器</A> </LI>
<LI><A href="http://www.divcss5.com/">div</A>
</LI></UL></LI>

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


 

css代码

  1.  /* www.divcss5.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.divcss5.com/fanli/divcss下拉导航菜单/
DIV+CSS+JS经典导航条-下拉菜单下载-下载CSS下拉型导航菜单

立即下载 (23.764KB

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/template/m224.shtml