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>
class="item02">
class="arrow-right">
span>
href="#">李四導航2a>
href="#">李四導航3a>
li>
href="#">李四導航3a>
li>
ul>
li>
class="arrow-right">
span>
href="#">李四導航3a>
href="#">李四導航3a>
li>
href="#">李四導航3a>
li>
ul>
li>
href="#">李四導航3a>
li>
href="#">李四導航3a>
li>
ul>
li>
class="item01">
class="arrow-right">
span>
href="#">導航1a>
class="item02">
class="arrow-right">
span>
href="#">李四導航2a>
href="#">李四導航3a>
li>
href="#">李四導航3a>
li>
ul>
li>
href="#">李四導航3a>
li>
href="#">李四導航3a>
li>
href="#">李四導航3a>
li>
ul>
li>
ul>
div>css** (ps:用sass編譯過來的，要設定初始化樣式。)
.main
.right
#submenu
.main
.right
#submenu
.arrow-right
.main
.right
#submenu
.item01
.main
.right
#submenu
.item01
:hover
.main
.right
#submenu
.item01
:hover > ul
.main
.right
#submenu
.item01 > a
.main
.right
#submenu
.item01 > ul
.main
.right
#submenu
.item01
.item02
.main
.right
#submenu
.item01
.item02 > li
.main
.right
#submenu
.item01
.item02 > li
:hover
.main
.right
#submenu
.item01
.item02 > li
:hover
ul .main
.right
#submenu
.item01
.item02 > li
:hover
a .main
.right
#submenu
.item01
.item02
a .main
.right
#submenu
.item01
.item02
ul .main
.right
#submenu
.item01
.item02ula
純css3實現的豎形二級導航
之前為大家分享了好多導航選單。今天給大家帶來一款純css3實現的豎形二級導航。這款導航選單可以是無限級。一起看下效果圖 實現的 html div style width 700px margin auto div class w1 h16 ul li class has sub a href men...
純CSS3實現的標籤效果
1.效果分析 純css3實現的標籤效果，如圖1所示，看看demo。該標籤主要有三個部分組成，左側的三角形 右側的圓角矩形和文字前面的小圓點。重點在左側三角形和文字前面圓點的實現。2.技術難點 三角形利用寬和高為零的元素的邊框實現。將邊框設定為12px solid transparent，然後將右側邊...
純CSS3實現的標籤效果
1.效果分析 純css3實現的標籤效果，如圖1所示，看看demo。該標籤主要有三個部分組成，左側的三角形 右側的圓角矩形和文字前面的小圓點。重點在左側三角形和文字前面圓點的實現。2.技術難點 三角形利用寬和高為零的元素的邊框實現。將邊框設定為12px solid transparent，然後將右側邊...