html:
<!DOCTYPE html>
<html lang="zh_cn">
<head>
<title>Css3.0_Test01</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="主页.css">
</head>
<body>
<nav class="header">
<img src="资源\logo.png">
<div class="drop">
<button type="button"><a href="">主页</a></button>
</div>
<div class="drop2">
<button type="button"><a href="">分区浏览</a></button></div>
<div class="drop-menu">
<a href="">1</a>
<a href="">1</a>
<a href="">1</a>
</div>
</nav>
</body>
</html>
CSS:
@charset "utf-8";
*{padding: 0;margin: 0;} /*rest*/
.header{
height: 90px;
width: 100%;
background-color: #33a3dc;
position: relative;
}
.header img{
width: 90px;
height: 90px;
}
.drop button{
position: absolute;
top: 60px;
left: 180px;
background-color:#33a3dc;
border: 2px;
}
.drop button a{
text-decoration: none;
color: #fff;
font-size: 20px;
font-weight: bold;
}
.drop button:hover , .drop2 button:hover{
background-color: #78cdd1;
}
.drop2 button{
position: absolute;
top: 60px;
left: 360px;
background-color:#33a3dc;
border: 2px;
}
.drop2 button a{
text-decoration: none;
color: #fff;
font-size: 20px;
font-weight: bold;
}
*{
padding: 0;margin: 0;
} /*rest*/
.drop-menu{ /* 问题代码段*/
display: none;
}
}
.drop2 button:hover .drop-menu{
display: block;
} /* 问题代码段*/
我想单鼠标悬停在按钮上时实现下拉菜单框的效果，但用hover却没有实现预期效果，class赋值没问题，也没有和link、active、visited一起使用，是不是我在使用CSS伪类选择器时还有别的固定要求啊？？请诸位大虾指导指导！
