<body>
<div id="aa">
<ul>
<li>
<a href="">what is new</a>
<div id="a2">
<ul class="a3">
<li>11</li>
<li>sad</li>
<li>asd</li>
<li>asd</li>
<li>das</li>
</ul>
<ul class="a3">
<li>11</li>
<li>sad</li>
<li>asd</li>
<li>asd</li>
<li>das</li>
</ul>
<ul class="a3">
<li>11</li>
<li>sad</li>
<li>asd</li>
<li>asd</li>
<li>das</li>
</ul>
<ul class="a3">
<li>11</li>
<li>sad</li>
<li>asd</li>
<li>asd</li>
<li>das</li>
</ul>
</div>
</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>
CSS样式
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
li a{
list-style: none;
text-decoration: none;
color: white;
}
#aa{
width: 900px;
height: 80px;
background-color: rgb(30, 8, 1);
/* align-content: center; */
margin: 0 auto;
clear: both;
}
#aa>ul>li{
float: left;
width:16% ;
height: 80px;
text-align: center;
line-height: 80px;
font-size: 20px;
border: 1px solid rgb(0, 0, 0);
}
#aa>ul>li:hover a{
background-color: rgba(230, 12, 27, 0.8);
display: block;
}
#aa>ul>li> #a2{
width: 900px;
height: 500px;
background-color: rgb(11, 246, 46);
}
#a2{
display: none;
}
#aa>ul>li:hover #a2{
display: block;
}
.a3{
margin: auto;
float: left;
width: 200px;
}
扫一扫
278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
