 
<div class="wrap"> 
<ul class="list clearfix"> 
<li><a href="">UI設(shè)計師</a> 
<div class="show"> 
<p>所屬部門：技術(shù)部</p> 
<p>工作地點：鄭州</p> 
<p>招聘人數(shù)：21</p> 
</div> 
</li> 
<li><a href="">前端開發(fā)工程師</a> 
<div class="show"> 
<p>所屬部門：技術(shù)部</p> 
<p>工作地點：鄭州</p> 
<p>招聘人數(shù)：21</p> 
</div> 
</li> 
<li><a href="">運維工程師</a> 
<div class="show"> 
<p>所屬部門：技術(shù)部</p> 
<p>工作地點：鄭州</p> 
<p>招聘人數(shù)：21</p> 
</div> 
</li> 
<li><a href="">研發(fā)開發(fā)工程師</a> 
<div class="show"> 
<p>所屬部門：技術(shù)部</p> 
<p>工作地點：鄭州</p> 
<p>招聘人數(shù)：21</p> 
</div> 
</li> 
<li><a href="">UI設(shè)計師</a> 
<div class="show"> 
<p>所屬部門：技術(shù)部</p> 
<p>工作地點：鄭州</p> 
<p>招聘人數(shù)：21</p> 
</div> 
</li> 
<li><a href="">前端開發(fā)工程師</a> 
<div class="show"> 
<p>所屬部門：技術(shù)部</p> 
<p>工作地點：鄭州</p> 
<p>招聘人數(shù)：21</p> 
</div> 
</li> 
<li><a href="">運維工程師</a> 
<div class="show"> 
<p>所屬部門：技術(shù)部</p> 
<p>工作地點：鄭州</p> 
<p>招聘人數(shù)：21</p> 
</div> 
</li> 
<li><a href="">研發(fā)開發(fā)工程師</a> 
<div class="show"> 
<p>所屬部門：技術(shù)部</p> 
<p>工作地點：鄭州</p> 
<p>招聘人數(shù)：21</p> 
</div> 
</li> 
<li><a href="">UI設(shè)計師</a> 
<div class="show"> 
<p>所屬部門：技術(shù)部</p> 
<p>工作地點：鄭州</p> 
<p>招聘人數(shù)：21</p> 
</div> 
</li> 
<li><a href="">前端開發(fā)工程師</a> 
<div class="show"> 
<p>所屬部門：技術(shù)部</p> 
<p>工作地點：鄭州</p> 
<p>招聘人數(shù)：21</p> 
</div> 
</li> 
<li><a href="">運維工程師</a> 
<div class="show"> 
<p>所屬部門：技術(shù)部</p> 
<p>工作地點：鄭州</p> 
<p>招聘人數(shù)：21</p> 
</div> 
</li> 
<li><a href="">研發(fā)開發(fā)工程師</a> 
<div class="show"> 
<p>所屬部門：技術(shù)部</p> 
<p>工作地點：鄭州</p> 
<p>招聘人數(shù)：21</p> 
</div> 
</li> 
</ul> 
</div> 

css代碼如下

復(fù)制代碼代碼如下:

 
* { 
margin:0; 
padding:0; 
} 
body { 
font-size:12px; 
} 
.wrap { 
width:600px; 
margin:100px auto; 
} 
.clearfix:after, .clearfix:before { 
display:table; 
content: ""; 
} 
.clearfix:after { 
clear:both; 
overflow: hidden; 
} 
.clearfix { 
zoom: 1; 
} 
.list { 
position:relative; //作為定位的父元素，li直接做父元素出現(xiàn)元素內(nèi)容重疊問題 
} 
.list li { 
list-style:none; 
width:100px; 
height:24px; 
line-height:24px; 
margin-right:10px; 
float:left; 
} 
.list li a { 
text-decoration:none; 
color:#333; 
display:block; 
} 
.show { 
position:absolute; 
width:100px; 
background:#FFFFE1; 
border:1px solid #ffcc01; 
padding:6px; 
display:none; 
z-index:5; 
margin-top:10px; //代替top 
margin-left:60px; //代替left 
} 
.show p { 
height:18px; 
line-height:18px; 
} 
.list li a:hover { 
text-decoration:underline; 
color:#FF0000; 
} 

jQuery代碼如下：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
$(function(){ 
var $li=$(".wrap").find("li"); 
$li.bind("mouseover",function(){ 
$(this).find(".show").show(); 
}).bind("mouseout",function(){ 
$(this).find(".show").hide(); 
}) 
}) 
</script> 

預(yù)覽效果;