html5 css 导航栏效果

先看看最后的效果： 2.然后先编写二级列表的类选择器nav-child

其他的高宽，超链接等属性样式它会默认继承父类，前面我们实现一级导航的时候已经定义过了，这里就不需要再定义这些了。

.nav-child{

list-style: none;

background-color:chocolate;

}

效果： 现在看起来还很乱，我们接下来希望让三级导航位于二级导航的右边，并且和二级导航对齐显示 3.这里就需要用到子绝父相的一个位置关系 关于position属性可以参考我写的文章：css position使用

我们给三级导航的父标签写一个相对位置，因为三级导航位于二级导航的li下，所以二级导航的li就是三级导航的父标签。

css代码：

.nav-child>li{

position: relative;

}

4.接着定义三级导航的类选择器样式

给三级导航一个position:absolute绝对位置，因为li标签的宽度是125px，所以就向左移动125px,top稍微调整一下就可以，这里我给的是-0px。

注意：前面虽然定义了li的宽度，但是在三级导航中是不生效的，所以这里要再定义一下它的宽度。

css代码：

.nav-child-1{

position:absolute;

left: 125px;

top: -0px;

width: 125px;

padding-left: 0%;

list-style: none;

background-color:darkgoldenrod;

display: none;

}

效果： 5.最后我们希望当我们鼠标移动到标签上时才显示子列表，其他时候都是隐藏状态。

实现思路：我们给每个子级列表一个display：none;的属性它就会隐藏起来不显示，然后再给父标签定义一个鼠标划过事件，就是当鼠标移动到父标签时display的值改完block，三级列表的父标签就是二级列表，二级列表的父标签就是一级列表。

css完整代码：

.nav{

width: 1000px;

height: 50px;

margin-top: 120px;

background-color:darkgray;

}

ul{

margin-top: 0px;

padding-inline-start: 0%;

}

.nav>ul>li{

float: left;

list-style: none;

text-align: center;

height: 50px;

line-height: 50px;

width: 125px;

font-size: 20px;

font-family: 黑体;

}

a{

color: black;

text-decoration: none;

}

ul>li>a:active{

color:orange;

}

ul>li:hover{

background-color:gold;

}

.nav-child{

list-style: none;

background-color:chocolate;

/*让二级子列表隐藏起来*/

display: none;

}

/*父标签设置相对位置*/

.nav-child>li{

position: relative;

}

/*鼠标划过一级列表时修改display的值，让二级子列表可见*/

li:hover>.nav-child{

display: block;

}

/*鼠标划过二级列表时修改display的值，让三级子列表可见*/

li:hover>.nav-child-1{

display: block;

}

.nav-child-1{

position:absolute;

left: 125px;

top: -0px;

width: 125px;

padding-left: 0%;

list-style: none;

background-color:darkgoldenrod;

/*让三级子列表隐藏起来*/

display: none;

}

效果：

多级导航栏

ok本篇文章就到这里，希望对各位小伙伴们有帮助。

好文阅读