1. 想知道为什么没有反应呢？代码哪里有问题吗？
2. 下面代码中:hover后面跟的div.pop这个选择器怎么用？
.top ul.left li.follow:hover div.pop {
display: block;
}
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>demo</title>
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<style>
body,
ul,
p {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
behavior: url("http://git.oschina.net/bianweiall/jquery/raw/master/html/jd/css/csshover.htc");
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.container {
width: 960px;
margin: 0 auto;
padding: 0px 10px;
}
.clearfloat {
clear: both;
height: 0;
font-size: 1px;
line-height: 0px;
}
/*header start*/
.top {
background-color: #F7F7F7;
border-bottom: 1px solid #EEEEEE;
}
.top ul li {
height: 30px;
line-height: 30px;
}
.top ul li a {
color: #666;
}
.top ul li a:hover {
color: #E4393C;
text-decoration: underline;
}
/*ul.left start*/
.top ul.left {
float: left;
}
.top ul.left li {
height: 30px;
line-height: 30px;
margin-right: 18px;
float: left;
color: #666;
}
.top ul.left li span {
margin-right: 5px;
display: block;
background-repeat: no-repeat;
float: left;
}
.top ul.left li.follow {
position: relative;
}
.top ul.left li.follow div {
display: none;
position: absolute;
width: 116px;
height: 129px;
top: 36px;
left: -50px;
background-color: #fff;
border: 1px solid #ddd;
z-index: 10;
}
.top ul.left li.follow div span {
position: absolute;
width: 0;
height: 0;
left: 48px;
border-width: 10px;
border-style: solid;
_overflow: hidden;
_border-style: dotted dashed solid dashed;
}
.top ul.left li.follow span.arrow1 {
top: -20px;
border-color: transparent transparent #ddd transparent;
}
.top ul.left li.follow span.arrow2 {
top: -19px;
border-color: transparent transparent #fff transparent;
}
.top ul.left li.address strong {
margin-right: 2px;
}
.top ul.left li.follow:hover div.pop {
display: block;
}
/*ul.left end*/
</style>
</head>
<body>
<div class="header">
<div class="top">
<div class="container">
<ul class="left">
<li class="favorites">
<a href="#">收藏</a>
</li>
<li class="follow">
<a href="#">关注</a>
<div class="pop">
<span class="arrow1"></span>
<span class="arrow2"></span>
</div>
</li>
<li class="address">
<strong>北京</strong><a href="#">[更换]</a>
</li>
</ul>
<div class="clearfloat"></div>
</div>
</div>
</div>
</body>
</html>
