实战案例:横向和纵向的三级下拉菜单需要掌握hover

三级下拉

类似二级下拉,在二级下拉的基础上配合定位的属性再添加一层.

一. 横向三级

二.纵向三级

文章最后后附三级下拉菜单的html代码.

1.两个ul绝对定位做横向(推荐)

此时的二级菜单有绝对定位,所以三级菜单会以二级菜单为参照物,如果不设置宽度三级菜单会出现折行的现象,所以需要给三级菜单一个宽度303px实现横向,或101px实现二级横向,三级竖向.

*{
   margin: 0;
padding: 0;}
a{
   
    text-decoration: none;
}
ul{
   
    list-style: none;
    text-align: center;
    height: 30px;
  
}
.one{
   
    margin: 0 auto;
    margin-bottom: 300px;
    width: 404px;
}

li{
   
    width: 101px;
    height: 30px;
    background-color: tomato;
    line-height: 30px;
    float: left;
}
a{
   display: block;
width: 101px;
height: 30px;
color: white;
}

.two,.three{
   
    display:none
}
/* 二级三级下拉菜单默认隐藏 */
.one>li:hover .two{
   
    display: block;
}
/* 当鼠标滑过一级菜单li时,二级菜单出现. */

.two{
   
    position: absolute;
}

.three{
   
    position: absolute;
}
/* ! 两个都用绝对做横向 */

.two li{
   
    background: blue;
}
.three li{
   
    background: blueviolet;
}
/* !给二级菜单和三级菜单背景 */

.two>li:hover .three{
   
    display: block;
    width: 303px;
}
/* !当鼠标滑过二级li时,三级菜单显示 */
/* 此时的二级菜单有绝对定位,所以三级菜单会以二级菜单为参照物,如果不设置宽度三级菜单会出现折行的现象. */
 a:hover{
   
    background: violet;
    color: black;
    text-decoration: underline;
}
.two a:hover{
   
    background: rgb(27, 199, 70);
    color: rgb(211, 119, 119);
}
.three a:hover{
   
    background: rgb(223, 219, 31);
    color: rgb(10, 19, 9);
}

2.两个ul相对定位做竖向(推荐)

只需将上面的代码去掉给三级ul的宽度
将二级菜单和三级菜单改变以下属性即可.

.two{
   
    position: relative;
}


.three{
   
    position: relative;
    left: 101px;
    top: -30px;
    width: 101px;
}

3.两个ul绝对定位配合li相对定位做竖向

由于二级的ul有绝对定位,所以三级的ul会首先以二级的ul为参照物,造成三级菜单不会跟着鼠标滑动改变位置.所以需要将二级的li做绝对定位参照物.

 .two {
   
    position: absolute;
    width: 101px;
}

.two li {
   
    position: relative;
}

.three {
   
    position: absolute;
    left: 101px;
    top: 0;

}

两个ul相对定位做横向

只需在两个ul相对定位做竖向的基础上,给二级和三级的ul增加一个宽度303px的属性即可.

三级下拉菜单的html代码
    <ul class="one">

        <li><a href="">一级</a>
            <ul class="two">
                <li><a href="">二级</a