已解决:我找到了答案!position:relative
我从 CSS中删除.over_meno li a{}
,现在一切正常。
我用 jQuery 创建了一个切换菜单,但是在 IE 7 中,文本超出了 div 框并且文本的装饰显示不好。
这是我的 jQuery 代码:
$(document).ready(function() {
$(".boxer .header_cerve").click(function () {
var item = $(this).attr("title");
if (item){
$("#" + item + " .details").slideToggle("slow");
$("#" + item + " .one_side").slideToggle("slow");
}
});
});
这是我的菜单 html:
<div id="2" class="boxer">
<div title="2" class="header_cerve">
<span class="right_corner"></span>
<span class="text">first menu</span>
</div>
<div class="details">
<ul class="over_meno">
<li><a href="sample.html"> <span>sample</span></a></li>
<li><a href="sample2.html"><span>sample2</span></a></li>
</ul>
</div>
<i style="" class="one_side">
<i class="gr4"><i></i></i>
<i class="gr3"><i></i></i>
<i class="gr2"><i></i></i>
<i class="gr1"><i></i></i>
</i></div>
并且有几个拳击手 div 那些 id 是不同的
每个拳击手都是一个切换菜单
有 CSS,但它有些复杂!:
.boxer {
padding: 10px 10px 0;
border: 1px solid #D4D4D4;
border-bottom: 0px;
border-top: 0px;
}
.boxer .header {
background: transparent url(../image/boxser_css_or.gif) repeat-x scroll 0 0;
color: #FFFFFF;
direction: rtl;
font-family: "Times New Roman",Times,serif;
font-size: 14px;
font-weight: bold;
height: 34px;
line-height: 33px;
padding: 0 10px;
text-align: right;
border-left: 1px solid #D7D5D5;
}
.boxer .header_cerve {
background: transparent url(../image/boxser_css_or.gif) repeat-x scroll 0 0;
color: #FFFFFF;
direction: rtl;
font-family: "Times New Roman",Times,serif;
font-size: 14px;
font-weight: bold;
height: 32px;
line-height: 33px;
padding: 0px;
text-align: right;
cursor: pointer;
}
.boxer .header_cerve .text {
padding-right: 10px;
line-height: 30px;
}
.boxer .details {
color: #000000;
background: #ffffff;
direction: rtl;
padding: 7px 0px;
text-align: right;
border: 1px solid #D7D5D5;
border-bottom: 0px;
}
.boxer .icon {
background: url(../image/felfel.png) no-repeat;
width: 20px;
height: 21px;
float: left;
margin-top: 5px;
}
.boxer .details .left_corner {
background: url(../image/boxser_corner.gif) no-repeat 0px 0px;
width: 8px;
height: 7px;
float: left;
}
.boxer .header_cerve .right_corner {
background: url(../image/boxser_corner.gif) no-repeat -8px 0px;
width: 7px;
height: 7px;
float: right;
}
.boxer .header_cerve .left_corner {
background: url("../image/boxser_corner.gif") no-repeat scroll 0 bottom transparent;
width: 7px;
height: 32px;
float: left;
}
i.gr1,
i.gr2,
i.gr3,
i.gr4 {
border-style: none solid;
border-width: 1px;
display: block;
height: 2px;
margin: 0 1px;
position: relative;
z-index: 30;
}
i.gr1 {
background: none repeat scroll 0 0 #D4D4D4;
border: 0 none;
height: 1px;
margin: 0 6px;
}
i.gr2,
i.gr3,
i.gr4 {
background: none repeat scroll 0 0 #ffffff;
border-color: #D4D4D4;
}
i.gr2 {
border-width: 2px;
height: 1px;
margin: 0 4px;
}
i.gr3 {
border-width: 2px;
height: 1px;
margin: 0 2px;
}