<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
.yy{
margin: 30px;
padding: 20px;
padding-right: 0px;
background-color: burlywood;
width: 200px;
height: 300px;
}
#child{
width: 200px;
height: 30px;
position:relative;
color: aliceblue;
}
#child:hover>.first{
display: inline-block
}
.first{
position:absolute;
display: none;
width: 200px;
left: 200px;
background-color: aqua;
}
.ys{
display: inline-block;
width: 200px;
height: 50px;
}
.ys>a{
text-decoration: none;
}
#child:hover{
background-color: coral;
color: aliceblue;
}
</style>
</head>
<body>
<div class="yy">
<div id="child">手机
<div class="first">
<div class="ys"><a href="https://www.mi.com/shop/buy/detail?product_id=16646&selected=16646&pClass=p">Redmi Note 12 Pro+</a></div>
<div class="ys"><a href="https://www.mi.com/shop/buy/detail?product_id=16644&selected=16644&pClass=p">Redmi Note 12 Pro</a></div>
<div class="ys"><a href="https://www.mi.com/shop/buy/detail?product_id=16642&selected=16642&pClass=p">Redmi Note 12 5G</a></div>
<div class="ys"><a href="https://www.mi.com/mi12s-pro">Xiaomi 12S Pro</a></div>
<div class="ys"><a href="https://www.mi.com/mi12s">Xiaomi 12S</a></div>
<div class="ys"><a href="https://www.mi.com/redminote11">Note 11 5G</a></div>
</div>
</div>
</div>
</body>
</html>
3203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
