html侧边导航栏折叠,HTML侧面导航栏

ul li {

list-style: none;

}

body,

html {

width: 100%;

height: 100%;

}

* {

margin: 0;

padding: 0;

}

.headder {

width: 100%;

height: 8%;

background-color: #1D8FF0;

text-align: center;

margin-top: auto;

display: flex;

/*实现垂直居中*/

align-items: center;

/*实现水平居中*/

justify-content: center;

text-align: justify;

margin: 0 auto;

}

.headder p {

color: white;

font-size: 24px;

line-height: 60px;

font-family: "Microsoft YaHei";

}

#body_right {

width: calc(100% - 200px);

float: left;

min-height: 100%;

display: inline-block;

vertical-align: top;

background: #f3faff;

font-size: 32px;

color: #999;

text-align: center;

}

.body_left {

padding: 0;

width: 200px;

min-height: 100%;

display: inline-block;

background: #333951;

float: left;

font-size: 16px;

color: #fff;

}

.body_wai {

width: 100%;

height: 100%;

}

.body_wai ul li {

font-size: 20px;

}

.biao1 {

display: none;

}

.bi:hover .biao1 {

transition-duration: 0.5s;

display: block;

}

.biao2 {

display: none;

}

.bi:hover .biao2 {

transition-duration: 0.5s;

display: block;

}

.bi:hover #er {

transition-duration: 0.5s;

background-color: #151B32;

border-left-width: 6px;

border-left-style: solid;

border-left-color: #1d8ff0;

cursor: pointer;

}

.bi:hover #cla {

transition-duration: 0.5s;

background-color: #3A3E50;

}

.bi2:hover #cla {

transition-duration: 0.5s;

background-color: #3A3E50;

}

#yiji {

background-color: #292E41;

width: 100%;

}

.bi2:hover .biao2 {

transition-duration: 0.5s;

display: block;

}

.bi2:hover #er {

transition-duration: 0.5s;

background-color: #151B32;

}

#cla {

color: gray;

}

#cla:hover {

color: white;

}

#er {

padding-left: 10%;

}

#cla {

padding-left: 20%;

}

/*#flo{

position: absolute;

width: 150px;

height: 100px;

background-color: red;

}*/

无限极导航(头部)

• 一级菜单

  • 二级菜单

    • 三级菜单1

    • 三级菜单二

• 二级菜单1

  • 三级菜单3

• 一级菜单

  • 二级菜单

    • 三级菜单1

    • 三级菜单二

• 二级菜单1

  • 三级菜单3

无限极导航(内容)

本文地址：https://blog.csdn.net/gcyqweasd/article/details/109234712