• 中办印发《关于进一步激励广大干部新时代新担当新作为的意见》 2019-09-07
  • 一条塔里木河 串起南疆各色景致与无限风光 2019-09-07
  • 【互动话题】我为两会建言献策 2019-07-18
  • 还是中国足球队最牛,因为他稳定;中国股市就不一样了,怎么形容呢?唉,还不如中国足球! 2019-07-18
  • 新生代农民工市民化与城镇化发展 2019-07-04
  • 习近平应约同俄罗斯总统普京通电话 2019-07-02
  • 中粮集团混改再按“快进键” 2019-07-02
  • 人的本质,要能反映出人与动物的本质不同。过去有个网友说“劳动是人的本质”;真理先生现说是“财富占有”!???,能解释一下么? 2019-06-30
  • [鄙视]又一个“风水帖”。深坛什么时候成了“算命平台”了?!这些伪公知砖家不深入农村了解农民,凭一点表象就信口开河,“辛苦劳作的农民没有富起来”是这“4点原因” 2019-06-22
  • 击鼓-热门标签-华商生活 2019-06-22
  • 河北定州:秸秆回收变废为宝 2019-05-14
  • 妹妹半个多世纪前嫁到安徽 八旬老人想再见她一面 2019-05-14
  • 在这里,读懂2017——人民日报十大评论文章 2019-05-14
  • 步飘恒的专栏作者中国国家地理网 2019-05-14
  • 【奋斗者说】银河麒麟孔金珠:核心技术只有靠自己干出来 2019-05-13
  • 欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

    符合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

  • 中办印发《关于进一步激励广大干部新时代新担当新作为的意见》 2019-09-07
  • 一条塔里木河 串起南疆各色景致与无限风光 2019-09-07
  • 【互动话题】我为两会建言献策 2019-07-18
  • 还是中国足球队最牛,因为他稳定;中国股市就不一样了,怎么形容呢?唉,还不如中国足球! 2019-07-18
  • 新生代农民工市民化与城镇化发展 2019-07-04
  • 习近平应约同俄罗斯总统普京通电话 2019-07-02
  • 中粮集团混改再按“快进键” 2019-07-02
  • 人的本质,要能反映出人与动物的本质不同。过去有个网友说“劳动是人的本质”;真理先生现说是“财富占有”!???,能解释一下么? 2019-06-30
  • [鄙视]又一个“风水帖”。深坛什么时候成了“算命平台”了?!这些伪公知砖家不深入农村了解农民,凭一点表象就信口开河,“辛苦劳作的农民没有富起来”是这“4点原因” 2019-06-22
  • 击鼓-热门标签-华商生活 2019-06-22
  • 河北定州:秸秆回收变废为宝 2019-05-14
  • 妹妹半个多世纪前嫁到安徽 八旬老人想再见她一面 2019-05-14
  • 在这里,读懂2017——人民日报十大评论文章 2019-05-14
  • 步飘恒的专栏作者中国国家地理网 2019-05-14
  • 【奋斗者说】银河麒麟孔金珠:核心技术只有靠自己干出来 2019-05-13
  • 河北福彩快三开 快速时时彩正规吗 山西快乐10分走势图派彩电子 贵州11选5推荐号 棋牌辅助软件 17玩湖南麻将 快乐十分群 双色球基本走势图18期 福彩官方微信公众号 3d娱乐平台 在农村怎么去赚钱吗 广西快乐双彩开奖信息 幸运赛车开奖视频直播 最近陕西彩票大奖得主 新疆18选7开奖规则 河北11选5彩票群