<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./lianxi.css">
</head>
<body>
<div id="one">
<ul>
<li>
<a href="">What's new</a>
<ul class="two">
<p class="three">
<li><span>HOME <br></span></li>
<li>Pampers Diapers</li>
<li>Huggies Diapers </li>
<li>Seventh Generation</li>
<li>Diapers</li>
<li>Derbies</li>
<li>Driving shoes</li>
<li>Espadrillesbr</li>
<li>Loafers</li>
</p>
<p class="three">
<li><span></span></li>
<li>Driving shoes </li>
<li>Espadrilles </li>
<li>Loafers </li>
<li><span> HOME</span></li>
<li>Driving shoes </li>
<li>Espadrilles </li>
<li>Loafers </li>
</p>
<p class="three">
<li><span>HOME</span></li>
<li>Pampers Diapers</li>
<li>Huggies Diapers</li>
<li>Seventh Generation</li>
<li>Diapers</li>
<li>Derbies</li>
<li>Driving shoes</li>
<li>Espadrilles</li>
<li> Loafers</li>
</p>
<p class="three">
<li><p>RELATED</p></li>
<li> CATEGORIES</li>
<li> Pampers DiapersHuggies Diapers</li>
<li>Diapers</li>
<li><p>BRANDS</p></li>
<li>Driving shoes </li>
<li> Espadrilles</li>
</p>
</ul>
</li>
<li><a href="">Top rated</a></li>
<li><a href="">Earnings</a></li>
<li><a href="">Rings</a></li>
<li><a href="">Bracelets</a></li>
<li><a href="">All Categories</a></li>
</ul>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: white;
}
#one{
width: 1540px;
height: 80px;
background-color: rgb(82, 79, 79);
}
#one>ul>li{
list-style: none;
float: left;
width: 256px;
height: 80px;
text-align: center;
line-height: 80px;
border-right: 1px solid rgb(0, 0, 0);
}
li:hover{
background-color: rgb(167, 167, 167);
}
.two{
width: 1536px;
height: 400px;
background-color: rgb(57, 52, 52);
}
.two li{
list-style: none;
width: 384px;
height: 40px;
float: left;
color: rgb(255, 255, 255);
line-height: 40px;
}
span{
color: #ffffff;
}
p{
color: rgb(255, 123, 0);
}
.two{
display: none;
}
#one>ul>li:hover .two{
display: block;
}