三级导航

首先我们先来看看HTML部分,如下图:
三级导航_第1张图片
三级导航_第2张图片
分别用一个ul标签和多个li标签包裹a标签,在第三个li(blog-b)标签里再嵌套多个ul标签和多个li标签,形成一个三级导航。
再来看看css部分如下图:
三级导航_第3张图片
三级导航_第4张图片

一.主要知识点:
1.hover选择器:选择鼠标指针浮动在其上的元素,并设置其样式。
2.visibility属性:使元素不可见,和display的功能是一样的但区别是visibility能够隐藏一个元素并占位,
display属性只隐藏不占位。
3.opacity属性:这个属性是设置元素的不透明的级别配合visibility属性使用更好。
三级导航_第5张图片

二.案例效果
三级导航_第6张图片
三级导航_第7张图片
三级导航_第8张图片
当鼠标移到Blog上二级导航框从后往前显示,当鼠标移到Blog Grid上三级导航框显示出来
有兴趣的可以去自己动手试试。

你可能感兴趣的:(css3,其他)