189 8069 5689

怎么用css3实现竖形二级导航

这篇文章主要介绍“怎么用css3实现竖形二级导航”,在日常操作中,相信很多人在怎么用css3实现竖形二级导航问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么用css3实现竖形二级导航”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

创新互联公司自2013年创立以来,先为涵江等服务建站,涵江等地企业,进行企业商务咨询服务。为涵江企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

之前为大家分享了好多导航菜单。今天给大家带来一款纯css3实现的竖形二级导航。这款导航菜单可以是无限级。一起看下效果图:

怎么用css3实现竖形二级导航

实现的代码。

html代码:

XML/HTML Code复制内容到剪贴板

  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复制内容到剪贴板

    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. }  

    到此,关于“怎么用css3实现竖形二级导航”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


    分享标题:怎么用css3实现竖形二级导航
    当前地址:http://cdxtjz.cn/article/jeoggg.html

    其他资讯