ie6/7 层级出现问题 下拉框被遮住
<!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>
<style type="text/css">
.zt{
float:left;
width:280px;
}
*{
margin:0;
padding:0;
}
body li dl dt{
margin:0;
padding:0;
}
img {
border:0;
}
body{
font-size: 12px;
color: #000;
font-family: Arial, Helvetica, sans-serif;
}
li{
list-style:none;
}
.fl{
float:left;
display:inline;
}
.fr{
float:right;
display:inline;
}
a{
text-decoration:none;
color:#000;
}
a:hover{
text-decoration:none;
}
.search{
position:absolute;
top:0;
left:50%;
margin-left:-487px;
}
.search_wei_left{
width:280px;
height:360px;
float:left;
position:relative;
}
.search_wei_left .search_head{
width:280px;
float:left;
}
.search_wei_left .search_head li{
width:140px;
height:40px;
float:left;
background:#6F828A;
color:#FFF;
font-size:18px;
font-weight:bold;
line-height:40px;
text-align:center;
cursor:pointer;
}
.search_wei_left .search_head .active{
background:#FFF;
filter:alpha(opacity:60);
opacity:0.6;
color:#00BCF3;
}
.search_wei_left .search_con{
width:280px;
height:320px;
float:left;
background:#099;
display:block;
}
.search_xianshi{
position:absolute;
top:40px;
left:0;
width:280px;
height:320px;
}
.search_input1{
width:240px;
height:35px;
float:left;
border:1px solid #BFBFBF;
margin:20px 20px;
display:inline;
background:#FFF;
}
.search_input1_left{
width:218px;
height:35px;
float:left;
position:relative;
}
.search_input1_left .input1{
width:218px;
height:15px;
padding:10px 0;
border:0;
font-size:13px;
line-height:20px;
float:left;
outline:none;
color:#7D7D7D;
}
.search_input1_right{
width:22px;
height:35px;
float:right;
cursor:pointer;
}
.search_xiala1_zhen{
width:240px;
border:1px solid #B5B5B5;
float:left;
z-index:9999;
position:absolute;
left:-1px;
top:37px;
background:#FFF;
z-index:999;
}
.search_xiala1_zhen .close{
width:14px;
height:14px;
position:absolute;
top:5px;
right:10px;
cursor:pointer;
}
.search_xiala1_zhen .zhen_head{
width:238px;
height:30px;
line-height:27px;
text-indent:20px;
font-size:15px;
}
.search_xiala1_zhen .zhen_head a{
padding-left:20px;
}
.search_xiala1_zhen .content{
width:220px;
margin-left:11px;
}
.search_xiala1_zhen .content li{
width:110px;
line-height:30px;
float:left;
}
.search_xiala1_zhen .content li a{
padding-left:20px;
color:#626262;
width:90px;
height:30px;
line-height:30px;
display:block;
border-bottom:1px solid #DCDCDC;
}
.search_xiala1_zhen .content li a:hover{
color:#00BCF3;
text-decoration:underline;
}
/*人数*/
.search_ren{
width:240px;
height:35px;
float:left;
margin:40px 20px;
display:inline;
}
.search_ren_rens{
width:115px;
height:22px;
float:left;
background:#FFF;
border:1px solid #BFBFBF;
}
.search_ren_rens .left{
width:92px;
height:22px;
float:left;
line-height:22px;
position:relative;
}
.search_ren_rens .left .input{
width:92px;
height:22px;
float:left;
border:0;
line-height:22px;
font-size:12px;
color:#7D7D7D;
outline:none;
}
.search_ren_rens .right{
width:21px;
height:22px;
float:right;
border-left:1px solid #BFBFBF;
}
.search_ren_rens_xiala{
width:70px;
border:1px solid #B5B5B5;
background:#FFF;
position:absolute;
left:0;
top:25px;
z-index:99999;
}
.search_ren_rens_xiala a{
width:70px;
height:28px;
display:inline-block;
line-height:28px;
font-size:15px;
cursor:pointer;
border-bottom:1px dashed #E5E5E5;
color:#626262;
}
.search_ren_rens_xiala a:hover{
background:#00B6F2;
color:#FFF;
}
.showbox{
height:260px;
width:119px;
position:relative;
overflow:hidden;
float:left;
margin:10px 1px;
display:inline;
}
.showbox .subtitle{
position:absolute;
left:0;
bottom:-230px;
height:260px;
width:120px;
background:#00BCF3;
opacity:0.7;
filter:alpha(opacity=70);
color:#fff;
font-size:12px;
}
.showbox .subtitle span{
color:#FFF;
width:120px;
height:25px;
line-height:25px;
float:left;
text-align:center;
}
.showbox .subtitle span a{
color:#FFF;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
window.onload=function()
{
zhen();
daren();
}
</script>
</head>
<body>
<div class="zt">
<div class="search_wei_left">
<div class="search_head">
<ul>
<li class="active">普通订房</li>
<li>家庭订房</li>
</ul>
</div>
<div class="search_con"></div>
<div style="clear:both;overflow:hidden;height:0;"></div>
<div class="search_xianshi">
<div class="search_con1" style="display:block;">
<form>
<div class="search_input1">
<div class="search_input1_left">
<input type="text" class="input1" value="输入或者选择小镇名称和目的地"/>
<div id="zhen" class="search_xiala1_zhen" style="display:none;" name="sy_xiand">
<div id="close" class="close">
<img src="images/Button_Hotcity_Close.gif" />
</div>
<div class="zhen_head">
可直接输入小镇的名称
</div>
<div class="content">
<ul>
<li>
<a href="">龙海风情小镇</a>
<a href="">林旺南风天小镇</a>
<a href="">龙海风情小镇</a>
<a href="">林旺南风小镇</a>
<a href="">林旺南风小镇</a>
</li>
<li>
<a href="">龙海风情小镇</a>
<a href="">林旺南风天小镇</a>
<a href="">林旺南风小镇</a>
<a href="">龙海风情小镇</a>
<a href="">林旺南风小镇</a>
</li>
</ul>
</div>
</div>
</div>
<div class="search_input1_right"></div>
</div>
<div class="search_ren">
<div class="search_ren_rens">
<div class="left">
<input class="input" autocomplete="off" style="outline:none;" type="text" value="人数" />
<div id="rens" class="search_ren_rens_xiala" style="display:none;" name="sy_xiand">
<ul>
<li class="active"><a href="">不限</a></li>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7+</a></li>
</ul>
</div>
</div>
<div class="right"></div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="showbox">
<a href=""><img width="120" height="260" src="http://wenwen.soso.com/p/20100315/20100315063953-747992335.jpg"/></a>
<div class="subtitle">
<span>龙海风情小镇</span>
<span>1544个旅店</span>
<span>2122个旅游攻略</span>
<span>2122个商户</span>
<span style="padding-top:30px;">特色：靠海听风</span>
<span style="margin-top:74px;background:#00BCF3;">
<a href="" class="fl" style="margin-left:10px;">订房间</a>
<a href="" class="fr" style="margin-right:10px;">小镇介绍</a>
</span>
</div>
</div>
</div>
<script type="text/javascript">
function zhen()
{
var oDiv=document.getElementById('zhen');
var input=document.getElementsByTagName('input');
var a=oDiv.getElementsByTagName('a');
var close1=document.getElementById('close');
close1.onclick=function()
{
oDiv.style.display="none";
}
input[0].onclick=function(ev)
{
var oev=ev||event;
if(oDiv.style.display=="none")
{
oDiv.style.display="block";
for(var i=0;i<a.length;i++)
{
a[i].onclick=function()
{
input[0].value=this.innerHTML;
oDiv.style.display="none";
return false;
}
}
}
else
{
oDiv.style.display="none";
}
oev.cancelBubble=true;
}
}
function daren()
{
var oDiv2=document.getElementById('rens');
var input=document.getElementsByTagName('input');
var a2=oDiv2.getElementsByTagName('a');
input[1].onclick=function(ev)
{
var oev=ev||event;
if(oDiv2.style.display=="none")
{
oDiv2.style.display="block";
for(var i=0;i<a2.length;i++)
{
a2[i].onclick=function()
{
input[1].value=this.innerHTML;
oDiv2.style.display="none";
return false;
}
}
}
else
{
oDiv2.style.display="none";
}
oev.cancelBubble=true;
}
}
</script>
<script type="text/javascript">
$(".showbox").each(function(){
var self = $(this), delay;
self.mouseover(function(){
delay = setTimeout(function(){ delay = null; self.find(".subtitle").stop().animate({"bottom":0}, 300);},300);
}).mouseout(function(){
if(delay){
clearTimeout(delay);
}else{
setTimeout(function(){self.find(".subtitle").stop().animate({"bottom":-230}, 300);},300);
}
});
});
</script>
</body>
</html>
<!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>
<style type="text/css">
.zt{
float:left;
width:280px;
}
*{
margin:0;
padding:0;
}
body li dl dt{
margin:0;
padding:0;
}
img {
border:0;
}
body{
font-size: 12px;
color: #000;
font-family: Arial, Helvetica, sans-serif;
}
li{
list-style:none;
}
.fl{
float:left;
display:inline;
}
.fr{
float:right;
display:inline;
}
a{
text-decoration:none;
color:#000;
}
a:hover{
text-decoration:none;
}
.search{
position:absolute;
top:0;
left:50%;
margin-left:-487px;
}
.search_wei_left{
width:280px;
height:360px;
float:left;
position:relative;
}
.search_wei_left .search_head{
width:280px;
float:left;
}
.search_wei_left .search_head li{
width:140px;
height:40px;
float:left;
background:#6F828A;
color:#FFF;
font-size:18px;
font-weight:bold;
line-height:40px;
text-align:center;
cursor:pointer;
}
.search_wei_left .search_head .active{
background:#FFF;
filter:alpha(opacity:60);
opacity:0.6;
color:#00BCF3;
}
.search_wei_left .search_con{
width:280px;
height:320px;
float:left;
background:#099;
display:block;
}
.search_xianshi{
position:absolute;
top:40px;
left:0;
width:280px;
height:320px;
}
.search_input1{
width:240px;
height:35px;
float:left;
border:1px solid #BFBFBF;
margin:20px 20px;
display:inline;
background:#FFF;
}
.search_input1_left{
width:218px;
height:35px;
float:left;
/* position:relative; */
}
.search_input1_left .input1{
width:218px;
height:15px;
padding:10px 0;
border:0;
font-size:13px;
line-height:20px;
float:left;
outline:none;
color:#7D7D7D;
}
.search_input1_right{
width:22px;
height:35px;
float:right;
cursor:pointer;
}
.search_xiala1_zhen{
width:240px;
border:1px solid #B5B5B5;
float:left;
z-index:9999;
position:absolute;
left:-1px;
top:37px;
background:#FFF;
z-index:999;
}
.search_xiala1_zhen_ifr{
width:240px;
border:none;
position:absolute;
left:-1px;
top:37px;
background:#FFF;
z-index:999;
display:none;
}
.search_xiala1_zhen .close{
width:14px;
height:14px;
position:absolute;
top:5px;
right:10px;
cursor:pointer;
}
.search_xiala1_zhen .zhen_head{
width:238px;
height:30px;
line-height:27px;
text-indent:20px;
font-size:15px;
}
.search_xiala1_zhen .zhen_head a{
padding-left:20px;
}
.search_xiala1_zhen .content{
width:220px;
margin-left:11px;
}
.search_xiala1_zhen .content li{
width:110px;
line-height:30px;
float:left;
}
.search_xiala1_zhen .content li a{
padding-left:20px;
color:#626262;
width:90px;
height:30px;
line-height:30px;
display:block;
border-bottom:1px solid #DCDCDC;
}
.search_xiala1_zhen .content li a:hover{
color:#00BCF3;
text-decoration:underline;
}
/*人数*/
.search_ren{
width:240px;
height:35px;
float:left;
margin:40px 20px;
display:inline;
}
.search_ren_rens{
width:115px;
height:22px;
float:left;
background:#FFF;
border:1px solid #BFBFBF;
}
.search_ren_rens .left{
width:92px;
height:22px;
float:left;
line-height:22px;
position:relative;
}
.search_ren_rens .left .input{
width:92px;
height:22px;
float:left;
border:0;
line-height:22px;
font-size:12px;
color:#7D7D7D;
outline:none;
}
.search_ren_rens .right{
width:21px;
height:22px;
float:right;
border-left:1px solid #BFBFBF;
}
.search_ren_rens_xiala{
width:70px;
border:1px solid #B5B5B5;
background:#FFF;
position:absolute;
left:0;
top:25px;
z-index:99999;
}
.search_ren_rens_xiala a{
width:70px;
height:28px;
display:inline-block;
line-height:28px;
font-size:15px;
cursor:pointer;
border-bottom:1px dashed #E5E5E5;
color:#626262;
}
.search_ren_rens_xiala a:hover{
background:#00B6F2;
color:#FFF;
}
.showbox{
height:260px;
width:119px;
position:relative;
overflow:hidden;
float:left;
margin:10px 1px;
display:inline;
}
.showbox .subtitle{
position:absolute;
left:0;
bottom:-230px;
height:260px;
width:120px;
background:#00BCF3;
opacity:0.7;
filter:alpha(opacity=70);
color:#fff;
font-size:12px;
}
.showbox .subtitle span{
color:#FFF;
width:120px;
height:25px;
line-height:25px;
float:left;
text-align:center;
}
.showbox .subtitle span a{
color:#FFF;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
window.onload=function()
{
zhen();
daren();
}
</script>
</head>
<body>
<div class="zt">
<div class="search_wei_left">
<div class="search_head">
<ul>
<li class="active">普通订房</li>
<li>家庭订房</li>
</ul>
</div>
<div class="search_con"></div>
<div style="clear:both;overflow:hidden;height:0;"></div>
<div class="search_xianshi">
<div class="search_con1" style="display:block;">
<form>
<div class="search_input1">
<div class="search_input1_left">
<input type="text" class="input1" value="输入或者选择小镇名称和目的地"/>
<iframe class="search_xiala1_zhen_ifr" ></iframe>
<div id="zhen" class="search_xiala1_zhen" style="display:none;" name="sy_xiand">
<div id="close" class="close">
<img src="images/Button_Hotcity_Close.gif" />
</div>
<div class="zhen_head">
可直接输入小镇的名称
</div>
<div class="content">
<ul>
<li>
<a href="">龙海风情小镇</a>
<a href="">林旺南风天小镇</a>
<a href="">龙海风情小镇</a>
<a href="">林旺南风小镇</a>
<a href="">林旺南风小镇</a>
</li>
<li>
<a href="">龙海风情小镇</a>
<a href="">林旺南风天小镇</a>
<a href="">林旺南风小镇</a>
<a href="">龙海风情小镇</a>
<a href="">林旺南风小镇</a>
</li>
</ul>
</div>
</div>
</div>
<div class="search_input1_right"></div>
</div>
<div class="search_ren">
<div class="search_ren_rens">
<div class="left">
<input class="input" autocomplete="off" style="outline:none;" type="text" value="人数" />
<div id="rens" class="search_ren_rens_xiala" style="display:none;" name="sy_xiand">
<ul>
<li class="active"><a href="">不限</a></li>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7+</a></li>
</ul>
</div>
</div>
<div class="right"></div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="showbox">
<a href=""><img width="120" height="260" src="http://wenwen.soso.com/p/20100315/20100315063953-747992335.jpg"/></a>
<div class="subtitle">
<span>龙海风情小镇</span>
<span>1544个旅店</span>
<span>2122个旅游攻略</span>
<span>2122个商户</span>
<span style="padding-top:30px;">特色：靠海听风</span>
<span style="margin-top:74px;background:#00BCF3;">
<a href="" class="fl" style="margin-left:10px;">订房间</a>
<a href="" class="fr" style="margin-right:10px;">小镇介绍</a>
</span>
</div>
</div>
</div>
<script type="text/javascript">
function zhen()
{
var oDiv=document.getElementById('zhen');
var input=document.getElementsByTagName('input');
var a=oDiv.getElementsByTagName('a');
var close1=document.getElementById('close');
close1.onclick=function()
{
oDiv.style.display="none";
$('.search_xiala1_zhen_ifr').hide();
}
input[0].onclick=function(ev)
{
var oev=ev
[解决办法]
event;
if(oDiv.style.display=="none")
{
oDiv.style.display="block";
var p=$( input[0]).offset();
// p.top+=input[0].offsetHeight;
$(oDiv).css(p)
$('.search_xiala1_zhen_ifr').show();
p.height=oDiv.offsetHeight;
$('.search_xiala1_zhen_ifr').css(p )
for(var i=0;i<a.length;i++)
{
a[i].onclick=function()
{
input[0].value=this.innerHTML;
oDiv.style.display="none";
$('.search_xiala1_zhen_ifr').hide();
return false;
}
}
}
else
{
oDiv.style.display="none";
$('.search_xiala1_zhen_ifr').hide();
}
oev.cancelBubble=true;
}
}
function daren()
{
var oDiv2=document.getElementById('rens');
var input=document.getElementsByTagName('input');
var a2=oDiv2.getElementsByTagName('a');
input[1].onclick=function(ev)
{
var oev=ev
[解决办法]
event;
if(oDiv2.style.display=="none")
{
oDiv2.style.display="block";
for(var i=0;i<a2.length;i++)
{
a2[i].onclick=function()
{
input[1].value=this.innerHTML;
oDiv2.style.display="none";
return false;
}
}
}
else
{
oDiv2.style.display="none";
}
oev.cancelBubble=true;
}
}
</script>
<script type="text/javascript">
$(".showbox").each(function(){
var self = $(this), delay;
self.mouseover(function(){
delay = setTimeout(function(){ delay = null; self.find(".subtitle").stop().animate({"bottom":0}, 300);},300);
}).mouseout(function(){
if(delay){
clearTimeout(delay);
}else{
setTimeout(function(){self.find(".subtitle").stop().animate({"bottom":-230}, 300);},300);
}
});
});
</script>
</body>
</html>
