• 河北定州:秸秆回收变废为宝 2019-05-14
  • 妹妹半个多世纪前嫁到安徽 八旬老人想再见她一面 2019-05-14
  • 在这里,读懂2017——人民日报十大评论文章 2019-05-14
  • 步飘恒的专栏作者中国国家地理网 2019-05-14
  • 【奋斗者说】银河麒麟孔金珠:核心技术只有靠自己干出来 2019-05-13
  • 建好欧美同学会 助力伟大中国梦 2019-05-13
  • 看把你高兴的屁颠屁颠的,光有赞有什么用?我给你个货真价实的 [大红包]。 2019-05-13
  • 不动产登记全国联网 名下多少套房一查就知道 2019-05-13
  • 晋城:八项重点打好水污染防治攻坚战 2019-05-12
  • 天津:社区志愿者织密村镇平安网 2019-05-12
  • 中央纪委紧盯“节点” 4年来通报曝光问题近4000起 2019-05-12
  • 遭受外来杨梅挑战 宁波宠果地产杨梅还能走多远 2019-05-11
  • 发达国家全这样,尊重个人的选择。[微笑][微笑] 2019-05-11
  • 第528期:你知道吗?二月份吃什么水果最适合 2019-05-11
  • 忻州召开“雪亮工程”建设现场会 2019-05-10
  • ?
    欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
    您的位置:时时彩走势图后一 > DIV+CSS???/a> >

    经典DIV+CSS下拉菜单

    时时彩走势图后一 www.cuhw.com.cn 符合WEB标准CSS下拉导航菜单布局css下拉菜单模板

    时时彩走势图后一下拉菜单样式图
    css下拉菜单图

    时时彩走势图后一下拉菜单样式图
    div+css下拉菜单样式演示图

    Html源代码

    1. <ul id="nav"> 
    2. <li><a href="//www.cuhw.com.cn/">div+css</a> 
    3.     <ul> 
    4.     <li><a href="//www.cuhw.com.cn/">CSS</a></li> 
    5.     <li><a href="#">产品一</a></li> 
    6.     <li><a href="#">产品一</a></li> 
    7.     <li><a href="#">产品一</a></li> 
    8.     <li><a href="#">产品一</a></li> 
    9.     <li><a href="#">产品一</a></li> 
    10.     </ul> 
    11. </li> 
    12. <li><a href="//www.cuhw.com.cn/rumen/">css入门</a> 
    13.     <ul> 
    14.     <li><a href="#">入门一</a></li> 
    15.     <li><a href="#">入门二</a></li> 
    16.     <li><a href="#">入门二</a></li> 
    17.     <li><a href="#">入门二入门二</a></li> 
    18.     <li><a href="#">入门二入门二入门二</a></li> 
    19.     <li><a href="#">入门二</a></li> 
    20.     </ul> 
    21. </li> 
    22. <li><a href="//www.cuhw.com.cn/html/">HTML基础</a> 
    23.     <ul> 
    24.     <li><a href="#">基础三</a></li> 
    25.     <li><a href="#">基础</a></li> 
    26.     <li><a href="#">基础三案例三</a></li> 
    27.     <li><a href="#">基础三案例三案例三</a></li> 
    28.     </ul> 
    29. </li> 
    30. <li><a href="//www.cuhw.com.cn/jiqiao/">DIV+CSS技巧</a> 
    31.     <ul> 
    32.     <li><a href="#">技巧四</a></li> 
    33.     <li><a href="#">技巧四</a></li> 
    34.     <li><a href="#">技巧四</a></li> 
    35.     <li><a href="#">技巧四111</a></li> 
    36.     </ul> 
    37. </li> 
    38.  
    39. <li><a href="//www.cuhw.com.cn/template/">DIV+CSS模板</a> 
    40.     <ul> 
    41.     <li><a href="//www.cuhw.com.cn/template/">CSS模板</a></li> 
    42.     <li><a href="#">模板</a></li> 
    43.     <li><a href="#">模板</a></li> 
    44.     <li><a href="#">模板模板</a></li> 
    45.     <li><a href="#">模板模板模板</a></li> 
    46.     <li><a href="#">模板模板</a></li> 
    47.     <li><a href="#">模板模板</a></li> 
    48.     <li><a href="#">模板模板模板模板</a></li> 
    49.     </ul> 
    50. </li> 
    51. <li><a href="//www.cuhw.com.cn/shouce/">CSS手册</a> 
    52.     <ul> 
    53.     <li><a href="//www.cuhw.com.cn/shouce/">DIV+CSS手册</a></li> 
    54.     <li><a href="#">手册</a></li> 
    55.     <li><a href="#">手册</a></li> 
    56.     <li><a href="#">手册</a></li> 
    57.     <li><a href="#">手册</a></li> 
    58.     <li><a href="#">手册手册</a></li> 
    59.     <li><a href="#">手册手册手册</a></li> 
    60.     </ul> 
    61. </li> 
    62. </ul> 

    CSS 代码及JS代码:

    1. <style type="text/css"> 
    2. /* 时时彩走势图后一 www.cuhw.com.cn CSS下拉菜单实例 */ 
    3. *{margin:0;padding:0;border:0} 
    4. body{ font-family: arial, 宋体, serif; font-size:12px} 
    5.  
    6.  
    7. #nav{line-height: 24px;  list-style-type: none; background:#666} 
    8.  
    9. #nav a{display: block; width: 80px; text-align:center} 
    10.  
    11. #nav a:link {color:#666; text-decoration:none} 
    12. #nav a:visited {color:#666;text-decoration:none} 
    13. #nav a:hover {color:#FFF;text-decoration:none;font-weight:bold} 
    14.  
    15. #nav li{float: left; width: 80px; background:#CCC} 
    16. #nav li a:hover{ background:#999} 
    17. #nav li ul{line-height: 27px;  list-style-type: none;text-align:left;left: -999em; width: 180px; position: absolute} 
    18. #nav li ul li{float: left; width: 180px;background:#EFEFEF} 
    19.  
    20.  
    21. #nav li ul a{display: block; width: 156px;text-align:left;padding-left:24px; overflow:hidden} 
    22.  
    23. #nav li ul a:link {color:#666; text-decoration:none} 
    24. #nav li ul a:visited {color:#666;text-decoration:none} 
    25. #nav li ul a:hover {color:#F3F3F3;text-decoration:none;font-weight:normal;background:#C00} 
    26.  
    27. #nav li:hover ul{left: auto} 
    28. #nav li.sfhover ul{left: auto} 
    29. #content{clear: left} 
    30. </style> 
    31.  
    32. <script type=text/javascript> 
    33.  
    34. function menuFix(){ 
    35.     var sfEls = document.getElementById("nav").getElementsByTagName("li"); 
    36.     for (var i=0; i<sfEls.length; i++){
    37.         sfEls[i].onmouseover=function(){
    38.         this.className+=(this.className.length>0? " ": "") + "sfhover"; 
    39.         }
    40.         sfEls[i].onMouseDown=function(){
    41.         this.className+=(this.className.length>0? " ": "") + "sfhover"; 
    42.         }
    43.         sfEls[i].onMouseUp=function(){
    44.         this.className+=(this.className.length>0? " ": "") + "sfhover"; 
    45.         }
    46.         sfEls[i].onmouseout=function(){
    47.         thisthis.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), 
    48. "");
    49.         }
    50.     }
    51. }
    52. window.onload=menuFix
    53. </script> 

    以上为DIV+CSS模板中的纯CSS下拉菜单布局代码及说明。
    查看CSS下拉菜单演示-点我查看。

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

    我要分享到:

    必备CSS教程 Essential CSS Tutorials

    必备HTML基础教程 Essential HTML Tutorials

    如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
    时时彩走势图后一文章修订日期:2010-04-15 09:29 原创:时时彩走势图后一
    本文时时彩走势图后一 www.cuhw.com.cn DIVCSS5版权所有。

  • 河北定州:秸秆回收变废为宝 2019-05-14
  • 妹妹半个多世纪前嫁到安徽 八旬老人想再见她一面 2019-05-14
  • 在这里,读懂2017——人民日报十大评论文章 2019-05-14
  • 步飘恒的专栏作者中国国家地理网 2019-05-14
  • 【奋斗者说】银河麒麟孔金珠:核心技术只有靠自己干出来 2019-05-13
  • 建好欧美同学会 助力伟大中国梦 2019-05-13
  • 看把你高兴的屁颠屁颠的,光有赞有什么用?我给你个货真价实的 [大红包]。 2019-05-13
  • 不动产登记全国联网 名下多少套房一查就知道 2019-05-13
  • 晋城:八项重点打好水污染防治攻坚战 2019-05-12
  • 天津:社区志愿者织密村镇平安网 2019-05-12
  • 中央纪委紧盯“节点” 4年来通报曝光问题近4000起 2019-05-12
  • 遭受外来杨梅挑战 宁波宠果地产杨梅还能走多远 2019-05-11
  • 发达国家全这样,尊重个人的选择。[微笑][微笑] 2019-05-11
  • 第528期:你知道吗?二月份吃什么水果最适合 2019-05-11
  • 忻州召开“雪亮工程”建设现场会 2019-05-10