R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R 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下拉菜单??槟0?/a>

              纯div css的下拉菜单导航
               

              css下拉菜单样式

              在很多公司企业型网站中,很多会用到下拉菜单的导航,对于很多css新手来是比较麻烦的一件事,接下来我们提供我们整理一套css下拉菜单源代码,源文件。
               

              1. <!DOCTYPE html> 
              2. <html xmlns="http://www.tommstudio.com/1999/xhtml"> 
              3. <head> 
              4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
              5. <title>CSS下拉菜单实例???www.tommstudio.com</title> 
              6. <style> 
              7. body,ul,li{background-color:white;font-size:12px;
                font-family:Arial, Helvetica, sans-serif;margin:0px; padding:0px;} 
              8. a{ color:#000000; text-decoration:none;} 
              9. body{text-align:center; } 
              10. li{display:inline;list-style:none;list-style-position:outside;
                text-align:center;font-weight:bold; float:left;} 
              11. .list a:link{color:#336601;text-decoration:none;float:left;
                width:100px;padding:3px 5px 0px 5px;} 
              12. .list a:visited{color:#336601;text-decoration:none;float:left;
                padding:3px 5px 0px 5px;width:100px;} 
              13. .list a:hover{color:white;float:left;padding:3px 3px 0px 20px;
                width:88px;text-decoration:none;background-color:#539D26;} 
              14. .list a:active{color:white;float:left;padding:3px 3px 0px 20px;
                width:88px;text-decoration:none; background-color:#BD06B4;} 
              15. #nav{width:600px;height:30px; margin:0 auto;padding:0px 5px;
                 text-align:center; clear:both;} 
              16. .list{line-height:20px;text-align:left;padding:4px;font-weight:normal;} 
              17. .menu1{width:120px;height:auto;margin:6px 4px 0px 0px;
                border:1px solid #9CDD75;background-color:#F1FBEC;color:#336601;
                padding:6px 0px 0px 0px;cursor:hand;
                overflow-y:hidden;filter:Alpha(opacity=70);-moz-opacity:0.7;} 
              18. .menu2{width:120px;height:18px;margin:6px 4px 0px 0px;
                background-color:#F5F5F5;color:#999999;border:1px solid #EEE8DD;
                padding:6px 0px 0px 0px;overflow-y:hidden;cursor:hand;} 
              19. </style> 
              20. </head> 
              21.  
              22. <body> 
              23. <div>大家以后在以后运用时候可以扩展使用,更改为适合自己网页需求
                <a href="http://www.tommstudio.com/">css</a>。</div> 
              24. <div id="nav"> 
              25. <ul> 
              26. <li class="menu2" onMouseOver="this.className='menu1'"
                 onMouseOut="this.className='menu2'">div+css  
              27. <div class="list"> 
              28. <a href="http://www.tommstudio.com/">DIV CSS</a><br /> 
              29. <a href="#">我的首页</a><br /> 
              30. <a href="#">我的日志</a><br /> 
              31. <a href="#">我的日志</a><br /> 
              32. <a href="#">我的相册</a><br /> 
              33. <a href="#">我的收藏</a><br /> 
              34. </div> 
              35. </li> 
              36. <li class="menu2" onMouseOver="this.className='menu1'"
                 onMouseOut="this.className='menu2'"><a href="http://www.tommstudio.com/html/">HTML入门</a> 
              37. <div class="list"> 
              38. <a href="http://www.tommstudio.com/html/">HTML入门</a><br /> 
              39. <a href="http://www.tommstudio.com/html/h5.html">html是什么</a><br /> 
              40. <a href="#">我的日志</a><br /> 
              41. <a href="#">我的相册</a><br /> 
              42. <a href="#">我的收藏</a><br /> 
              43. </div> 
              44. </li> 
              45. <li class="menu2" onMouseOver="this.className='menu1'"
                 onMouseOut="this.className='menu2'"><a href="http://www.tommstudio.com/rumen/">CSS入门</a>  
              46. <div class="list"> 
              47. <a href="http://www.tommstudio.com/">DIVCSS5</a><br /> 
              48. <a href="#">我的相册</a><br /> 
              49. <a href="#">我的收藏</a><br /> 
              50. </div> 
              51. </li> 
              52. <li class="menu2" onMouseOver="this.className='menu1'" 
                onMouseOut="this.className='menu2'">
                <a href="http://www.tommstudio.com/css-hack/">CSS HACK</a> 
              53. <div class="list"> 
              54. <a href="http://www.tommstudio.com/">DIV+CSS</a><br /> 
              55. <a href="#">我的首页</a><br /> 
              56. <a href="#">我的日志</a><br /> 
              57. <a href="#">我的相册</a><br /> 
              58. <a href="#">我的收藏</a><br /> 
              59. </div> 
              60. </li> 
              61. </ul> 
              62. </div> 
              63. </body> 
              64. </html> 

              CSS下拉菜单打包下载地址

              下拉菜单演示地址http://www.tommstudio.com/fanli/下拉.html

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

              我要分享到:

              必备CSS教程 Essential CSS Tutorials

              必备HTML基础教程 Essential HTML Tutorials

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