1、侧拉列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.nav{
width: 100%;
height: 240px;
/* background-color: black; */
}
.one_ul{
width: 200px;
height: 120px;
list-style: none;
background-color: bisque;
}
.one_li{
width: 200px;
height: 60px;
line-height: 60px;
text-align: center;
}
.two_ul{
width: 800px;
height: 60px;
/* background-color: brown; */
list-style: none;
}
.two_ul li{
width: 200px;
height: 60px;
float: left;
}
span{
width: 200px;
height: 60px;
line-height: 60px;
text-align: center;
float: left;
display: block;
}
.two_ul{
display: none;
}
.one_li:hover .two_ul{
display: block;
}
.two_ul li:hover{
background-color: lightpink;
}
.one_li span:hover{
background-color: teal;
color: aliceblue;
}
</style>
</head>
<body>
<div class="nav">
<ul class="one_ul">
<li class="one_li">
<span>时间</span>
<ul class="two_ul">
<li>早上</li>
<li>中午</li>
<li>晚上</li>
</ul>
<