<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script>
$(function(){
$(".crm_menu").hide();
$(".job").click(function(){
var state = $(this).find(".crm_menu").css("display");
if(state == "none") {
$(".crm_menu",this).show(300);
} else{
$(".crm_menu",this).hide(300);
}
$(this).siblings().find(".crm_menu").hide();
})
})
</script>
<style type="text/css" >
*{padding:0;margin:0;}
ul,li{list-style:none;}
.job {float:left;width:100px;background:#000;position:relative;height:25px;margin:10px;}
.job span{display:block;text-align:center;line-height:25px;color:#F00; cursor:pointer;}
.crm_menu {position:absolute;top:25px;left:0px;}
.crm_menu ul li{float:none;}
</style>
<div class="nv1">
<div class="job"><span> 移动到1</span>
<div class="crm_menu">
<li><a href="">这个是样式1</a></li>
</div>
</div>
<div class="job"><span> 移动到2</span>
<div class="crm_menu"> <a href="">这个是样式2</a> </div>
</div>
<div class="job"><span> 移动到3</span>
<div class="crm_menu"> <a href="">这个是样式3</a> </div>
</div>
<div class="job"><span> 移动到4</span>
<div class="crm_menu"> <a href="">这个是样式4</a> </div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script>
$(function(){
$(".crm_menu").hide();
$(".job").click(function(){
var state = $(this).find(".crm_menu").css("display");
if(state == "none") {
$(".crm_menu",this).show(300);
} else{
$(".crm_menu",this).hide(300);
}
$(this).siblings().find(".crm_menu").hide();
})
})
</script>
<style type="text/css" >
*{padding:0;margin:0;}
ul,li{list-style:none;}
.job {float:left;width:100px;background:#000;position:relative;height:25px;margin:10px;}
.job span{display:block;text-align:center;line-height:25px;color:#F00; cursor:pointer;}
.crm_menu {position:absolute;top:25px;left:0px;}
.crm_menu ul li{float:none;}
</style>
<div class="nv1">
<div class="job"><span> 移动到1</span>
<div class="crm_menu">
<li><a href="">这个是样式1</a></li>
</div>
</div>
<div class="job"><span> 移动到2</span>
<div class="crm_menu"> <a href="">这个是样式2</a> </div>
</div>
<div class="job"><span> 移动到3</span>
<div class="crm_menu"> <a href="">这个是样式3</a> </div>
</div>
<div class="job"><span> 移动到4</span>
<div class="crm_menu"> <a href="">这个是样式4</a> </div>
</div>
</div>
</body>
</html>
