真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

如何使用純css3實(shí)現(xiàn)的豎形二級(jí)導(dǎo)航

這篇文章主要介紹了如何使用純css3實(shí)現(xiàn)的豎形二級(jí)導(dǎo)航,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。

10年積累的網(wǎng)站制作、網(wǎng)站建設(shè)經(jīng)驗(yàn),可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你,你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程,更有岑鞏免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

html代碼:

  1.   

  2.           

  3.             

        

    •                 Menu 1  

    •                     

          

      •                         Submenu 1.1  

      •                             

            

        •                                 

        • Submenu 1.1.1
        •   

        •                                 Submenu 1.1.2  

        •                                     

              

          •                                         

          • Submenu 1.1.2.1
          •   

          •                                         

          • Submenu 1.1.2.2
          •   

          •                                     

            

        •                                 

        •   

        •                             

          

      •                         

      •   

      •                         

      • Submenu 1.2
      •   

      •                     

        

    •                 

    •   

    •                 Menu 2  

    •                     

          

      •                         

      • Submenu 2.1
      •   

      •                         

      • Submenu 2.2
      •   

      •                     

        

    •                 

    •   

    •                 Menu 3  

    •                     

          

      •                         

      • Submenu 3.1
      •   

      •                         

      • Submenu 3.2
      •   

      •                     

        

    •                 

    •   

    •             

      

  4.         

  

  •     

  •   

    css3代碼:

    CSS Code復(fù)制內(nèi)容到剪貼板

    1. .W1-h26 {   

    2.   padding: 0;   

    3.   margin: 0;   

    4.   border: 0;   

    5.   line-height: 1;   

    6. }   

    7. .W1-h26 ul,   

    8. .W1-h26 ul li,   

    9. .W1-h26 ul ul {   

    10.   list-style: none;   

    11.   margin: 0;   

    12.   padding: 0;   

    13. }   

    14. .W1-h26 ul {   

    15.   position: relative;   

    16.   z-index: 500;   

    17.   float: left;   

    18. }   

    19. .W1-h26 ul li {   

    20.   float: left;   

    21.   min-height: 0.05em;   

    22.   line-height: 1em;   

    23.   vertical-align: middle;   

    24.   position: relative;   

    25. }   

    26. .W1-h26 ul li.hover,   

    27. .W1-h26 ul li:hover {   

    28.   position: relative;   

    29.   z-index: 510;   

    30.   cursor: default;   

    31. }   

    32. .W1-h26 ul ul {   

    33.   visibility: hidden;   

    34.   position: absolute;   

    35.   top: 100%;   

    36.   left: 0px;   

    37.   z-index: 520;   

    38.   width: 100%;   

    39. }   

    40. .W1-h26 ul ul li {   

    41.   float: none;   

    42. }   

    43. .W1-h26 ul ul ul {   

    44.   top: 0;   

    45.   rightright: 0;   

    46. }   

    47. .W1-h26 ul li:hover > ul {   

    48.   visibility: visible;   

    49. }   

    50. .W1-h26 ul ul {   

    51.   top: 0;   

    52.   left: 99%;   

    53. }   

    54. .W1-h26 ul li {   

    55.   float: none;   

    56. }   

    57. .W1-h26 ul ul {   

    58.   margin-top: 0.05em;   

    59. }   

    60. .W1-h26 {   

    61.   width: 13em;   

    62.   background: #333333;   

    63.   font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;   

    64.   zoom: 1;   

    65. }   

    66. .W1-h16:before {   

    67.   content: '';   

    68.   display: block;   

    69. }   

    70. .W1-h16:after {   

    71.   content: '';   

    72.   display: table;   

    73.   clear: both;   

    74. }   

    75. .W1-h26 a {   

    76.   display: block;   

    77.   padding: 1em 1.3em;   

    78.   color: #ffffff;   

    79.   text-decoration: none;   

    80.   text-transform: uppercase;   

    81. }   

    82. .W1-h26 > ul {   

    83.   width: 13em;   

    84. }   

    85. .W1-h26 ul ul {   

    86.   width: 13em;   

    87. }   

    88. .W1-h26 > ul > li > a {   

    89.   border-right: 0.3em solid #1b9bff;   

    90.   color: #ffffff;   

    91. }   

    92. .W1-h26 > ul > li > a:hover {   

    93.   color: #ffffff;   

    94. }   

    95. .W1-h26 > ul > li a:hover,   

    96. .W1-h26 > ul > li:hover a {   

    97.   background: #1b9bff;   

    98. }   

    99. .W1-h26 li {   

    100.   position: relative;   

    101. }   

    102. .W1-h26 ul li.has-sub > a:after {   

    103.   content: '»';   

    104.   position: absolute;   

    105.   rightright: 1em;   

    106. }   

    107. .W1-h26 ul ul li.first {   

    108.   -webkit-border-radius: 0 3px 0 0;   

    109.   -moz-border-radius: 0 3px 0 0;   

    110.   border-radius: 0 3px 0 0;   

    111. }   

    112. .W1-h26 ul ul li.last {   

    113.   -webkit-border-radius: 0 0 3px 0;   

    114.   -moz-border-radius: 0 0 3px 0;   

    115.   border-radius: 0 0 3px 0;   

    116.   border-bottom: 0;   

    117. }   

    118. .W1-h26 ul ul {   

    119.   -webkit-border-radius: 0 3px 3px 0;   

    120.   -moz-border-radius: 0 3px 3px 0;   

    121.   border-radius: 0 3px 3px 0;   

    122. }   

    123. .W1-h26 ul ul {   

    124.   border: 1px solid #0082e7;   

    125. }   

    126. .W1-h26 ul ul a {   

    127.   color: #ffffff;   

    128. }   

    129. .W1-h26 ul ul a:hover {   

    130.   color: #ffffff;   

    131. }   

    132. .W1-h26 ul ul li {   

    133.   border-bottom: 1px solid #0082e7;   

    134. }   

    135. .W1-h26 ul ul li:hover > a {   

    136.   background: #4eb1ff;   

    137.   color: #ffffff;   

    138. }   

    139. .W1-h26.align-rightright > ul > li > a {   

    140.   border-left: 0.3em solid #1b9bff;   

    141.   border-right: none;   

    142. }   

    143. .W1-h26.align-rightright {   

    144.   float: rightright;   

    145. }   

    146. .W1-h26.align-rightright li {   

    147.   text-align: rightright;   

    148. }   

    149. .W1-h26.align-rightright ul li.has-sub > a:before {   

    150.   content: '+';   

    151.   position: absolute;   

    152.   top: 50%;   

    153.   left: 15px;   

    154.   margin-top: -6px;   

    155. }   

    156. .W1-h26.align-rightright ul li.has-sub > a:after {   

    157.   content: none;   

    158. }   

    159. .W1-h26.align-rightright ul ul {   

    160.   visibility: hidden;   

    161.   position: absolute;   

    162.   top: 0;   

    163.   left: -100%;   

    164.   z-index: 598;   

    165.   width: 100%;   

    166. }   

    167. .W1-h26.align-rightright ul ul li.first {   

    168.   -webkit-border-radius: 3px 0 0 0;   

    169.   -moz-border-radius: 3px 0 0 0;   

    170.   border-radius: 3px 0 0 0;   

    171. }   

    172. .W1-h26.align-rightright ul ul li.last {   

    173.   -webkit-border-radius: 0 0 0 3px;   

    174.   -moz-border-radius: 0 0 0 3px;   

    175.   border-radius: 0 0 0 3px;   

    176. }   

    177. .W1-h26.align-rightright ul ul {   

    178.   -webkit-border-radius: 3px 0 0 3px;   

    179.   -moz-border-radius: 3px 0 0 3px;   

    180.   border-radius: 3px 0 0 3px;   

    181. }  

    感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“如何使用純css3實(shí)現(xiàn)的豎形二級(jí)導(dǎo)航”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!


    網(wǎng)頁名稱:如何使用純css3實(shí)現(xiàn)的豎形二級(jí)導(dǎo)航
    轉(zhuǎn)載來源:http://weahome.cn/article/pchcgs.html

    其他資訊

    在線咨詢

    微信咨詢

    電話咨詢

    028-86922220(工作日)

    18980820575(7×24)

    提交需求

    返回頂部