<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米</title>
<style>
.dout{
width: 200px;
height:300px;
background: dimgray;
}
.uint{
list-style: None;
}
.dint{
width: 300px;
height:200px;
position: absolute;
margin-left: 160px;
margin-top: -20px;
background: white;
opacity: 0;
}
a{
}
li{
margin-top: 10px;
margin-left:0;
}
.uout:hover .dint{
opacity:1;
}
</style>
</head>
<body>
<div style="background: black;width: 2000px;height:1000px">
<div class="dout">
<ul style="list-style: None;">
<li class="uout" >
<a style="color: white;">手机</a>
<span style="margin-left:85px;color: white">></span>
<div class="dint">
<ul class="uint">
<li>
<a><img src="" alt="#">xiaomi max系列</a>
</li>
<li><a><img src="" alt="#">xiaomi max系列</a></li>
<li><a><img src="" alt="#">xiaomi max系列</a></li>
<li><a><img src="" alt="#">xiaomi max系列</a></li>
<li><a><img src="" alt="#">xiaomi max系列</a></li>
<li><a><img src="" alt="#">xiaomi max系列</a></li>
</ul>
</div>
</li>
<li>
<a style="color: white;">电视</a>
<span style="margin-left:85px;color: white">></span>
<div></div>
</li>
<li>
<a style="color: white;">家电</a>
<span style="margin-left:85px;color: white">></span>
<div></div>
</li>
<li>
<a style="color: white;">笔记本 平板</a>
<span style="margin-left:33px;color: white">></span>
<div></div>
</li>
<li>
<a style="color: white;">出行 穿戴</a>
<span style="margin-left:50px;color: white">></span>
<div></div>
</li>
<li>
<a style="color: white;">耳机 音响</a>
<span style="margin-left:50px;color: white">></span>
<div></div>
</li>
<li>
<a style="color: white;">健康 儿童</a>
<span style="margin-left:50px;color: white">></span>
<div></div>
</li>
<li>
<a style="color: white;">生活 箱包</a>
<span style="margin-left:50px;color: white">></span>
<div></div>
</li>
<li>
<a style="color: white;">智能 路由器</a>
<span style="margin-left:33px;color: white">></span>
<div></div>
</li>
<li>
<a style="color: white;">电源 配件</a>
<span style="margin-left:50px;color: white">></span>
<div></div>
</li>
</ul>
</div>
</div>
</body>
</html>
停留显示
于 2023-12-22 22:30:25 首次发布