<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding-left: 0;
}
.sgood{
position: relative;
float: left;
text-align: center;
width:60px;
}
.s1{
color:#666;
font-size:12px;
border:1px solid #3a3a3a;
display:block;
float:left;
border-right:none;
margin-top:35px;
cursor:pointer;
width: 60px;
height: 35px;
line-height: 34px;
background: #fff;
}
.ss1{
border: 1px solid #999;
border-top:none;
height:40px;
width: 100%;
background:#FFF;
text-align:center;
font-size:12px;
position:absolute;
top: 72px;
display: none;
}
.s1:hover .ss1{
display: block;
}
</style>
</head>
<body>
<div class="sgood">
<span class="s1">搜商品</span>
<ul class="ss1">
<li><a href="">店铺</a></li>
<li><a href="">商品</a></li>
</ul>
</div>
</body>
</html>解决方法一
因为你的ul不属于.s1的子元素
你可以改成.sgood:hover .ss1
解决方法二
.ss1 {
opacity: 0;
}
.ss1:hover {
opacity: 1;
}这样「显示 | 隐藏」也可以
509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
