Vertical level two navigation implemented by CSS3

This article mainly introduces a pure CSS3 implementation of the vertical level two navigation example tutorial, this navigation menu features can be unlimited. There is code below, no friends can come to learn from learning OH

Before we shared a lot of navigation menus. Today to bring you a pure CSS3 implementation of the vertical level two navigation. This navigation menu can be an infinite level. Look together:

The implemented code.

　　HTML code:

<p style= "width:700px; Margin:auto; "  > <p class= "w1-h16" > <ul> <li class= "has-sub" ><a href= "#" >menu 1</a> <ul> <li class= "has-sub" ><a href= "#" >submenu 1.1& lt;/a> <ul> <li><a href= "#" >submenu 1.1.1&L                                    t;/a></li> <li class= "has-sub" ><a href= "#" >submenu 1.1.2</a> <ul> <li><a href= "#" >submenu 1.1. 2.1</a></li> <li><a href= "#" >submenu 1.1.2.2</a></                            Li> </ul> </li> </ul> </li> <li><a href= "#" &GT;SUBMENu 1.2</a></li> </ul> </li> <li class= "has-sub "><a href=" # ">menu 2</a> <ul> <li><a href=" # ">s                    Ubmenu 2.1</a></li> <li><a href= "#" >submenu 2.2</a></li> </ul> </li> <li class= "has-sub" ><a href= "#" >menu 3</                        a> <ul> <li><a href= "#" >submenu 3.1</a></li>                <li><a href= "#" >submenu 3.2</a></li> </ul> </li> </ul> </p> </p>

　　CSS3 Code:

.     w1-h16 {padding:0;     margin:0;     border:0;   Line-height:1; }   . W1-h16 ul,. W1-h16 ul Li,.     W1-H16 ul ul {list-style:none;     margin:0;   padding:0; }   .     W1-h16 ul {position:relative;     z-index:500;   Float:left; }   .     W1-h16 ul li {float:left;     Min-height:0.05em;     Line-height:1em;     Vertical-align:middle;   position:relative; }   . W1-h16 ul Li.hover,.     W1-h16 ul li:hover {position:relative;     z-index:510;   Cursor:default; }   .     W1-H16 ul ul {Visibility:hidden;     Position:absolute;     top:100%;     left:0px;     z-index:520;   width:100%; }   .   W1-H16 ul ul Li {float:none; }   .     W1-H16 UL ul ul {top:0;   rightright:0; }   .   W1-h16 ul Li:hover > ul {visibility:visible; }   .     W1-H16 ul ul {top:0;   left:99%; }   .   W1-h16 ul li {float:none; }   .   W1-H16 ul ul {margin-top:0.05em; }   .     w1-h16 {width:13em;    Background: #333333; font-family: ' Oxygen Mono ', Tahoma, Arial, Sans-serif;   Zoom:1; }   .     W1-h16:before {content: ';   Display:block; }   .     W1-h16:after {content: ';     display:table;   Clear:both; }   .     W1-h16 a {display:block;     Padding:1em 1.3em;     Color: #ffffff;     Text-decoration:none;   Text-transform:uppercase; }   .   W1-H16 > ul {width:13em; }   .   W1-H16 ul ul {width:13em; }   .     W1-H16 > Ul > li > A {border-right:0.3em solid #1b9bff;   Color: #ffffff; }   .   W1-H16 > Ul > li > A:hover {color: #ffffff; }   . W1-H16 > Ul > Li a:hover,.   W1-H16 > Ul > Li:hover a {background: #1b9bff; }   .   W1-h16 Li {position:relative; }   .     W1-h16 ul li.has-sub > A:after {content: '» ';     Position:absolute;   Rightright:1em; }   .     W1-H16 ul ul li.first {-webkit-border-radius:0 3px 0 0;     -moz-border-radius:0 3px 0 0;   border-radius:0 3px 0 0; }   . W1-H16 ul ul Li.last {     -webkit-border-radius:0 0 3px 0;     -moz-border-radius:0 0 3px 0;     border-radius:0 0 3px 0;   border-bottom:0; }   .     W1-H16 ul ul {-webkit-border-radius:0 3px 3px 0;     -moz-border-radius:0 3px 3px 0;   border-radius:0 3px 3px 0; }   .   W1-H16 ul ul {border:1px solid #0082e7; }   .   W1-H16 ul ul a {color: #ffffff; }   .   W1-H16 ul ul a:hover {color: #ffffff; }   .   W1-H16 ul ul li {border-bottom:1px solid #0082e7; }   .     W1-H16 ul ul Li:hover > a {background: #4eb1ff;   Color: #ffffff; }   .     W1-h16.align-rightright > Ul > li > A {border-left:0.3em solid #1b9bff;   Border-right:none; }   .   w1-h16.align-rightright {float:rightright; }   .   W1-h16.align-rightright Li {text-align:rightright; }   .     W1-h16.align-rightright ul li.has-sub > A:before {content: ' + ';     Position:absolute;     top:50%;     left:15px;   Margin-top: -6px; }   . W1-h16.align-rightright ul li.has-sub > A:after {content:none; }   .     W1-h16.align-rightright ul ul {Visibility:hidden;     Position:absolute;     top:0;     Left:-100%;     z-index:598;   width:100%; }   .     W1-h16.align-rightright ul ul Li.first {-webkit-border-radius:3px 0 0 0;     -moz-border-radius:3px 0 0 0;   border-radius:3px 0 0 0; }   .     W1-h16.align-rightright ul ul li.last {-webkit-border-radius:0 0 0 3px;     -moz-border-radius:0 0 0 3px;   border-radius:0 0 0 3px; }   .     W1-h16.align-rightright ul ul {-webkit-border-radius:3px 0 0 3px;     -moz-border-radius:3px 0 0 3px;   border-radius:3px 0 0 3px; }

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!