R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R

      <noframes id="LVXRHZN"><address id="LVXRHZN"><nobr id="LVXRHZN"></nobr></address>

      <noframes id="LVXRHZN"><noframes id="LVXRHZN"><address id="LVXRHZN"><listing id="LVXRHZN"></listing></address>
      <sub id="LVXRHZN"></sub>

        <sub id="LVXRHZN"></sub>
        <address id="LVXRHZN"><listing id="LVXRHZN"><menuitem id="LVXRHZN"></menuitem></listing></address>

        <sub id="LVXRHZN"></sub>

        <address id="LVXRHZN"></address>

        <address id="LVXRHZN"></address>
        <noframes id="LVXRHZN">

          <noframes id="LVXRHZN">
          <sub id="LVXRHZN"></sub>
              <address id="LVXRHZN"><listing id="LVXRHZN"><menuitem id="LVXRHZN"></menuitem></listing></address>
            1. 820466150 2017-11-04
            2. 388113149 2017-11-04
            3. 740898148 2017-11-04
            4. 892683147 2017-11-04
            5. 540252146 2017-11-04
            6. 888745145 2017-11-04
            7. 981419144 2017-11-04
            8. 544637143 2017-11-04
            9. 454205142 2017-11-04
            10. 212476141 2017-11-04
            11. 39821140 2017-11-04
            12. 170835139 2017-11-03
            13. 37766138 2017-11-03
            14. 538854137 2017-11-03
            15. 926181136 2017-11-03
            16. 18188135 2017-11-03
            17. 420335134 2017-11-03
            18. 553276133 2017-11-03
            19. 4149132 2017-11-02
            20. 883561131 2017-11-02
            21. 891189130 2017-11-02
            22. 649552129 2017-11-02
            23. 950957128 2017-11-02
            24. 295914127 2017-11-02
            25. 781243126 2017-11-02
            26. 682892125 2017-11-02
            27. 829649124 2017-11-02
            28. 168426123 2017-11-01
            29. 406171122 2017-11-01
            30. 724134121 2017-11-01
            31. “砥砺奋进的五年”大型成就展
            32. “总书记的回信说到了我们心坎上”
            33. 德媒:拒绝“洋垃圾”——肮脏的游戏,中国不玩了
            34. 求实创造 为人师表
            35. 家长群里质疑老师收礼排座位 被班主任踢出家长群
            36. 两手抓两促进 打造坚强战斗堡垒
            37. 新论:党章,每个党员都需时刻铭记
            38. 谁击落了MH17?各方互相指责
            39. 互联网用户公众账号信息服务管理规定
            40. 台籍律师在大陆 就业+创业不是“梦”
            41. 法国总统说政治对话是保证叙利亚实现可持续和平的唯一办法
            42. 天胶“保险+期货”精准扶贫首批给付500万 惠及云南临沧400余建档贫困户
            43. [征集]资深网友看这里 新时代老人们希望何种"夕阳红"
            44. 近千家A股公司三季报业绩预喜
            45. 台媒吹台特种兵“斩首”能力一流:堪比海豹三角洲
            46. 欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
              您的位置:DIVCSS5学习网 > DIV+CSS???/a> >

              经典DIV+CSS下拉菜单

              符合WEB标准CSS下拉导航菜单布局css下拉菜单模板

              DIVCSS5学习网下拉菜单样式图
              css下拉菜单图

              DIVCSS5学习网下拉菜单样式图
              div+css下拉菜单样式演示图

              Html源代码

              1. <ul id="nav"> 
              2. <li><a href="http://www.tommstudio.com/">div+css</a> 
              3.     <ul> 
              4.     <li><a href="http://www.tommstudio.com/">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="http://www.tommstudio.com/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="http://www.tommstudio.com/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="http://www.tommstudio.com/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="http://www.tommstudio.com/template/">DIV+CSS模板</a> 
              40.     <ul> 
              41.     <li><a href="http://www.tommstudio.com/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="http://www.tommstudio.com/shouce/">CSS手册</a> 
              52.     <ul> 
              53.     <li><a href="http://www.tommstudio.com/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.tommstudio.com 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下拉菜单演示-点我查看。

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

              我要分享到:

              必备CSS教程 Essential CSS Tutorials

              必备HTML基础教程 Essential HTML Tutorials

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