欢迎来到DIVCSS5查找CSS资料与学习DIV 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

  • 上一篇: div css导航条(全屏css导航条)
  • 下一篇: 纯DIV CSS按钮(图+例子+下载)
必备CSS教程Essential CSS Tutorials
必备HTML基础教程Essential HTML Tutorials
最新文章 NEWS
  • CSS 简介需要具备的基础知识
  • 如何使用纯CSS 实现一个没有DOM元素的动画效果
  • 什么是css盒子模型?
  • 什么是css盒子模型?
  • css技术是什么
  • 区块属性: (Block)
  • 五、CSS连接属性:
  • 虚拟主机相关知识
  • DIV CSS加载失败
  • DIV+CSS规范命名大全集合
CSS 特效 CSS EFFECTS
  • 纯DIV+CSS下拉菜单模块模板
    纯DIV+CSS下拉菜单模块模板
  • DIV+CSS分页_CSS翻页代码模板
    DIV+CSS分页_CSS翻页代码模板
  • css form实例 用CSS实现表单form布局实例
    css form实例 用CSS实现表单form布局实例
  • 经典DIV+CSS下拉菜单
    经典DIV+CSS下拉菜单
  • div+css不间断上下滚动模板
    div+css不间断上下滚动模板
  • 向上不间断滚动div+css+js模板
    向上不间断滚动div+css+js模板
相关文章 RELATED
  • 利用flex布局,配合margin:auto使用,实现水平垂直居中。
  • 使用flex布局,设置其属性justify-content,align-items都为center,实现水平垂直居中
  • 使用absolute绝对定位,配合translate 移动转换,实现水平垂直居中
  • 使用absolute绝对定位,配合margin的负值(negative margins)来实现水平垂直居中
  • 使用absolute绝对定位,配合margin使用,实现水平垂直居中
  • 仿table,display:table-cell。并使用vertical-align属性,实现垂直居中
  • 使用table布局,默认垂直居中
  • 使用float属性,配合relative定位,实现水平居中
  • line-height值,垂直居中
  • margin: 0 auto,水平居中
热点文章 HOT
  • css 字间距离_css 字体字符间距设置
  • CSS border边框属性教程(color style)
  • div css float浮动用法(left right)
  • CSS 文本字体颜色(CSS color)
  • CSS 高度(css height)
  • DIV+CSS虚线边框|CSS虚线下划线及虚线列表教程
  • CSS如何设置html table表格边框样式
  • DIV+CSS中让布局居中_背景图片居中_文字内容居中

哆哆女性网ipad下载的文件在哪里周易免费取网名张姓男孩鼠年起名字大全八字算命技巧个独公司起名易经起名有限公司春晓古诗文网男士的个性签名优秀的网站制作2021周公解梦直销网站建设二龙湖爱情故事2021在线观看岳姓起名大全男孩吗五行属水12画起名字周易免费公司名字测打分世界十大外星人未解之谜起名五行公式处女座今日运势专业商城网站制作公司红楼梦87版33集解析公益网名朔州市网站建设最新未解之谜永城到虞城多少公里洪姓男宝起名大全思维导图在线制作网站鬼故事读出来女孩起名 韩做教育公司起名永城双桥火车站淀粉肠小王子日销售额涨超10倍罗斯否认插足凯特王妃婚姻不负春光新的一天从800个哈欠开始有个姐真把千机伞做出来了国产伟哥去年销售近13亿充个话费竟沦为间接洗钱工具重庆警方辟谣“男子杀人焚尸”男子给前妻转账 现任妻子起诉要回春分繁花正当时呼北高速交通事故已致14人死亡杨洋拄拐现身医院月嫂回应掌掴婴儿是在赶虫子男孩疑遭霸凌 家长讨说法被踢出群因自嘲式简历走红的教授更新简介网友建议重庆地铁不准乘客携带菜筐清明节放假3天调休1天郑州一火锅店爆改成麻辣烫店19岁小伙救下5人后溺亡 多方发声两大学生合买彩票中奖一人不认账张家界的山上“长”满了韩国人?单亲妈妈陷入热恋 14岁儿子报警#春分立蛋大挑战#青海通报栏杆断裂小学生跌落住进ICU代拍被何赛飞拿着魔杖追着打315晚会后胖东来又人满为患了当地回应沈阳致3死车祸车主疑毒驾武汉大学樱花即将进入盛花期张立群任西安交通大学校长为江西彩礼“减负”的“试婚人”网友洛杉矶偶遇贾玲倪萍分享减重40斤方法男孩8年未见母亲被告知被遗忘小米汽车超级工厂正式揭幕周杰伦一审败诉网易特朗普谈“凯特王妃P图照”考生莫言也上北大硕士复试名单了妈妈回应孩子在校撞护栏坠楼恒大被罚41.75亿到底怎么缴男子持台球杆殴打2名女店员被抓校方回应护栏损坏小学生课间坠楼外国人感慨凌晨的中国很安全火箭最近9战8胜1负王树国3次鞠躬告别西交大师生房客欠租失踪 房东直发愁萧美琴窜访捷克 外交部回应山西省委原副书记商黎光被逮捕阿根廷将发行1万与2万面值的纸币英国王室又一合照被质疑P图男子被猫抓伤后确诊“猫抓病”

哆哆女性网 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化