本文介绍了一个非常美丽的、纯CSS3制作的垂直无限级的导航效果，和合作伙伴需要直接使用它。





在你分享很多导航菜单。今天，你把你的纯CSS3实现垂直无限级导航，导航菜单可以是无限的。看看效果图。



实现的代码。

HTML代码：


复制代码代码如下所示：



菜单1

子菜单1.1

子菜单1.1.1
1.1.2菜单

子菜单1.1.2.1
子菜单1.1.2.2




子菜单1.2


菜单2

子菜单2.1
子菜单2.2


菜单3

子菜单3.1
子菜单3.2







CSS3代码：


复制代码代码如下所示：
{。w1-h16
填充：0；
保证金：0；
边界：0；
线高度：1；
}
w1-h16 UL，
w1-h16 ul，
w1-h16 UL UL {。
列表样式：无；
保证金：0；
填充：0；
}
w1-h16 UL {。
职位：相对；
Z指数：500；
浮点数：左；
}
w1-h16 ul {。
浮点数：左；
最小高度：0.05em；
行高：1em；
垂直对齐：中间；
职位：相对；
}
w1-h16 UL li.hover，
李：悬停{ w1-h16 UL。
职位：相对；
Z指数：510；
游标：默认值；
}
w1-h16 UL UL {。
可见性：隐藏；
位置：绝对；
顶部：100%；
左：0px；
Z指数：520；
宽度：100%；
}
w1-h16 ul ul {。
没有浮；
}
w1-h16 UL UL UL {。
顶部：0；
权利：0；
}
李：悬停。w1-h16 UL UL { >
可见性：可见；
}
w1-h16 UL UL {。
顶部：0；
左：99%；
}
w1-h16 ul {。
浮点数：无；
}
w1-h16 UL UL {。
边距：0.05em；
}
{。w1-h16
宽度：13em；
背景：# 333333；
字体家庭：'oxygen单，宋体，Arial，无衬线字体；
缩放：1；
}
{ w1-h16：之前。
内容；
显示块；
}
{ w1-h16：后。
内容；
显示：表；
清楚：两者；
}
w1-h16 {。
显示块；
填料：1em 1.3em；
颜色：# ffffff；
文字装饰：无；
文本转换：大写；
}
w1-h16 > UL {。
宽度：13em；
}
w1-h16 UL UL {。
宽度：13em；
}
> > >里。w1-h16 UL一{
边境：0.3em固体# 1b9bff；
颜色：# ffffff；
}
> > >里。w1-h16 UL：悬停{
颜色：# ffffff；
}
。w1-h16 > 李：悬停，
。w1-h16 > 李：把{
背景：# 1b9bff；
}
w1-h16李{。
职位：相对；
}
。w1-h16 UL li.has-sub >一：后{
内容；
位置：绝对；
右：1em；
}
w1-h16 UL UL li.first {。
WebKit的边界半径：0 3px 00；
0 3px -moz边界半径：00；
0 3px边界半径：00；
}
w1-h16 UL UL li.last {。
WebKit的边界半径：00 3px 0；
00 3px -moz边界半径：0；
00 3px边界半径：0；
边界底部：0；
}
w1-h16 UL UL {。
WebKit的边界半径：0 3px 3px 0；
-moz边界半径：0 3px 3px 0；
边界半径：0 3px 3px 0；
}
w1-h16 UL UL {。
边境：1px solid # 0082e7；
}
w1-h16 UL UL一{。
颜色：# ffffff；
}
。w1-h16 UL UL：悬停{
颜色：# ffffff；
}
w1-h16 ul ul {。
底部边框：1px solid # 0082e7；
}
。w1-h16 UL UL李：悬停>一{
背景：# 4eb1ff；
颜色：# ffffff；
}
> > >里。w1-h16.align-right UL一{
左边界：0.3em固体# 1b9bff；
边界权：无；
}
{。w1-h16.align-right
浮子：右边；
}
w1-h16.align-right李{。
文本对齐：正确；
}
。w1-h16.align-right UL li.has-sub >：在{
+内容；
位置：绝对；
顶部：50%；
左：15px；
边距：- 6px；
}
。w1-h16.align-right UL li.has-sub >一：后{
内容：无；
}
w1-h16.align-right UL UL {。
可见性：隐藏；
位置：绝对；
顶部：0；
左：- 100%；
Z指数：598；
宽度：100%；
}
w1-h16.align-right UL UL li.first {。
WebKit的3px边界半径：000；
3px -moz边界半径：000；
3px边界半径：000；
}
w1-h16.align-right UL UL li.last {。
WebKit的边界半径：000 3px；
-moz边界半径：000 3px；
边界半径：000 3px；
}
w1-h16.align-right UL UL {。
WebKit的边界半径：00 3px 3px；
-moz边界半径：00 3px 3px；
3px 3px边界半径：00；
}


效果很好，这里推荐给大家，及时征求反馈。