slideToggle issues in IE 7 (jQuery)

Question

SOLVED: I found the answer! I delete position:relative from CSS .over_meno li a{} , everything works correctly now.

I create a toggle menu with jQuery, but in IE 7 text go out of div box and decoration of text show bad.

This is my jQuery code:

$(document).ready(function() {

    $(".boxer .header_cerve").click(function () {
        var item = $(this).attr("title");
        if (item){
          $("#" + item + " .details").slideToggle("slow");
          $("#" + item + " .one_side").slideToggle("slow");
          }
});
});

this is my menu 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>

and there is several boxer div that those id is difference

Every boxer is one toggle menu

There is CSS but it`s some complex!! :

.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;
}

Answer 1

i found the answer! i delete position:relative from css .over_meno li a{}, every things correct now