之前為大家分享了好多導航選單。今天給大家帶來一款純css3實現的豎形二級導航。這款導航選單可以是無限級。一起看下效果圖：
實現的**。
html**：
<css3**：div
style
="width: 700px; margin: auto;"
>
<
div
class
="w1-h16"
>
<
ul>
<
li class
="has-sub"
><
a href
="#"
>menu 1
a>
<
ul>
<
li class
="has-sub"
><
a href
="#"
>submenu 1.1
a>
<
ul>
<
li><
a href
="#"
>submenu 1.1.1
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
="#"
>submenu 1.2
a>
li>
ul>
li>
<
li class
="has-sub"
><
a href
="#"
>menu 2
a>
<
ul>
<
li><
a href
="#"
>submenu 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>
div>
div>
.w1-h16 .w1-h16 ul,.w1-h16 ul li,
.w1-h16 ul ul .w1-h16 ul .w1-h16 ul li .w1-h16 ul li.hover,
.w1-h16 ul li:hover .w1-h16 ul ul .w1-h16 ul ul li .w1-h16 ul ul ul .w1-h16 ul li:hover > ul .w1-h16 ul ul .w1-h16 ul li .w1-h16 ul ul .w1-h16 .w1-h16:before .w1-h16:after .w1-h16 a .w1-h16 > ul .w1-h16 ul ul .w1-h16 > ul > li > a .w1-h16 > ul > li > a:hover .w1-h16 > ul > li a:hover,
.w1-h16 > ul > li:hover a .w1-h16 li .w1-h16 ul li.has-sub > a:after .w1-h16 ul ul li.first .w1-h16 ul ul li.last .w1-h16 ul ul .w1-h16 ul ul .w1-h16 ul ul a .w1-h16 ul ul a:hover .w1-h16 ul ul li .w1-h16 ul ul li:hover > a .w1-h16.align-right > ul > li > a .w1-h16.align-right .w1-h16.align-right li .w1-h16.align-right ul li.has-sub > a:before .w1-h16.align-right ul li.has-sub > a:after .w1-h16.align-right ul ul .w1-h16.align-right ul ul li.first .w1-h16.align-right ul ul li.last .w1-h16.align-right ul ul
CSS3應用（1） 二級導航的製作
如果想要實現網頁的二級導航，我們可以使用js技術，動態的顯示和隱藏二級選單，當然也可以使用css技術來實現。並且這裡推薦使用css，因為其效率更高，更流暢。這裡將介紹二級選單的動態顯示與隱藏。一般導航的主體我們主要是使用ul li標籤 服務 人才招聘 導航的布局，由於子元素要隨著父元素，所以對二級選...
CSS3 二級導航選單的製作的示例
如果想要實現網頁的二級導航，我們可以使用js技術，動態的顯示和隱藏二級選單，當然也可以使用css技術來實現。並且這裡推薦使用cwww.cppcns.comss，因為其效率更高，更流暢。這裡將介紹二級選單的動態顯示與隱藏。1 結構 一般導航的主體我們主要是使用ul li標籤 www.cppcns.co...
純CSS實現3級導航選單效果。
href 導航1a class item02 class arrow right span href 李四導航2a href 李四導航3a li href 李四導航3a li ul li ul li class item01 class arrow right span href 導航1a clas...