css div仿照select下拉框跳转效果
日期：2014-05-17 浏览次数：20680 次
css div模仿select下拉框跳转效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.111cn.et/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css div模仿select下拉框跳转效果</title>
<style type="text/css">
body{
font:12px/20px Arial, Helvetica, sans-serif ,"宋体";
color:#222
}
ul,dl,dt,dd,form,p,h1,h2,h3,h4,h5,h6,blockquote,pre{margin:0;padding:0}
li{list-style:none}
img{border:0}
a{color:#1E5494}
a:hover{color:#2674D1}
input,select{font-size:12px;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif}
.select{
position:relative;
padding:5px 5px 2px 5px;
width:52px;
background:#F4F4F4;
}
.select span{
cursor:pointer
}
#sub_list{
position:absolute;
padding:0 2px 2px 0;
top:28px;
left:0;
width:60px;
background:#F4F4F4
}
#sub_list ul{
display:block;
padding:5px;
border:1px solid #E1E1E1;
background:#FFF
}
#sub_list ul li{
border-bottom:1px solid #E1E1E1;
}
#sub_list ul li a{
display:block;
padding:3px 0 2px 3px;
text-decoration:none
}
#sub_list ul li a:hover{
background:#F4F4F4
}
.hidden{
display:none
}
</style>
</head>
<body>
<div class="select">
<span onclick="showSelect(this,'sub_list')">请选择▲</span>
<div id="sub_list" class="hidden" onclick="this.style.display = 'none'">
<ul>
<li><a href="http://111cn.net" target="_blank">1</a></li>
<li><a href="http://111cn.net/" target="_blank">2</a></li>
<li><a href="http://163.com/" target="_blank">3</a></li>
</ul>
</div>
</div>
</body>
</html>
<script type="text/javascript">
function showSelect(hld,id){
var ele = document.getElementByIdx_x(id);
ele.style.display = 'block';
var timer = null;
ele.onmouseover = function(){
if(timer){
clearTimeout(timer);
}
ele.style.display = 'block';
}
ele.onmouseout = function(){
timer = setTimeout(function(){ele.style.display = 'none'},500);
}
hld.onmouseover = function(){
if(timer){
clearTimeout(timer);
}
}
hld.onmouseout = function(){
timer = setTimeout(function(){ele.style.display = 'none'},500);
}
}
</
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.111cn.et/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css div模仿select下拉框跳转效果</title>
<style type="text/css">
body{
font:12px/20px Arial, Helvetica, sans-serif ,"宋体";
color:#222
}
ul,dl,dt,dd,form,p,h1,h2,h3,h4,h5,h6,blockquote,pre{margin:0;padding:0}
li{list-style:none}
img{border:0}
a{color:#1E5494}
a:hover{color:#2674D1}
input,select{font-size:12px;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif}
.select{
position:relative;
padding:5px 5px 2px 5px;
width:52px;
background:#F4F4F4;
}
.select span{
cursor:pointer
}
#sub_list{
position:absolute;
padding:0 2px 2px 0;
top:28px;
left:0;
width:60px;
background:#F4F4F4
}
#sub_list ul{
display:block;
padding:5px;
border:1px solid #E1E1E1;
background:#FFF
}
#sub_list ul li{
border-bottom:1px solid #E1E1E1;
}
#sub_list ul li a{
display:block;
padding:3px 0 2px 3px;
text-decoration:none
}
#sub_list ul li a:hover{
background:#F4F4F4
}
.hidden{
display:none
}
</style>
</head>
<body>
<div class="select">
<span onclick="showSelect(this,'sub_list')">请选择▲</span>
<div id="sub_list" class="hidden" onclick="this.style.display = 'none'">
<ul>
<li><a href="http://111cn.net" target="_blank">1</a></li>
<li><a href="http://111cn.net/" target="_blank">2</a></li>
<li><a href="http://163.com/" target="_blank">3</a></li>
</ul>
</div>
</div>
</body>
</html>
<script type="text/javascript">
function showSelect(hld,id){
var ele = document.getElementByIdx_x(id);
ele.style.display = 'block';
var timer = null;
ele.onmouseover = function(){
if(timer){
clearTimeout(timer);
}
ele.style.display = 'block';
}
ele.onmouseout = function(){
timer = setTimeout(function(){ele.style.display = 'none'},500);
}
hld.onmouseover = function(){
if(timer){
clearTimeout(timer);
}
}
hld.onmouseout = function(){
timer = setTimeout(function(){ele.style.display = 'none'},500);
}
}
</
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
