Вложенный ul li ul пробел в IE

Question

У меня проблема с отображением вложенного списка в IE, Firefox отображает его идеально.

Я прилагаю скриншоты и код также.

HTML Code:

<div class="header-boxes" id="topic-options">
<a id="slidertoggle" href="#">List Title</a>
<div id="options" style="display: none;">
<ul>
<li ><a href="#">Topic1</a></li>
<li ><a href="#">Topic2</a></li>
<li ><a href="#">List1 » </a>
<ul >
<li><a href="#">Topic3</a></li>
<li><a href="#">Topic4</a></li>
<li><a href="#">Topic5</a></li>
</ul>
</li>
<li ><a href="#">Topic6</a></li>
</ul>
</div>
</div>

Код CSS:

    #topic-options {
    width: auto;
    z-index: 3000;
}

.header-boxes {
    float: left;
    font-family: "Trebuchet MS",Arial,sans-serif;
    font-size: 13px;
    height: 27px;
    margin-right: 8px;
}

a#slidertoggle {
    background: url('2downarrow.png') no-repeat scroll 95% 50% #D9E4FF;
    border-radius: 5px 5px 5px 5px;
    color: #3F3019;
    display: block;
    padding: 7px;
    width: auto;
    margin: 0;
}

a:link, body_alink {
    color: #B35400;
}

a {
    color: #B35400;
    text-decoration: none;
}

#options {
    border: 1px solid #EBE1D6;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    display: none;
    position: absolute;
    width: auto;
    z-index: 50;
}

ol, ul {
    list-style: none outside none;
    padding : 0; 
    margin : 0;
}

#options ul li {
    border-bottom: 1px solid #EBE1D6;
    background-color: #DFEFFC;
    position: relative;
}

#options ul li a {
    background-color: #DFEFFC;
    display: block;
    padding: 7px 10px;
}


#options ul ul {
    border: 1px solid #EBE1D6;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    left: 100%;
    position: absolute;
    top: -1px;
    visibility: hidden;
}

Снимки экрана:

В Firefox код работает хорошо и прекрасно отображает вложенный список, как и ожидалось.

Firefox:

Firefox http://geniusguru.in/test/moz.jpg

В IE (протестирован в IE7) код отображается в виде изображения ниже, вложенный ul внутри li имеет промежуток между ним и его родителем.Перепробовал все чертовы вещи, но не повезло.

IE7:

IE7 http://geniusguru.in/test/ie.JPG

Пожалуйста, помогите мне.

Извините, что не опубликовал мой jqueryкод

JQUERY код:

     function getSubnav(ele) {
      if (ele.nodeName.toLowerCase() == 'li') {
        var subnav = $('> ul', ele);
        return subnav.length ? subnav[0] : null;
      } else {
        return ele;
      }
    }


$(document).ready(function(){

$('#slidertoggle').click(function(e){
e.preventDefault();
$('#options').show();
});

$('#options').mouseleave(function(e){
$('#options').hide();
});

var maxWidth = $('#topic-options').width()>$('#options').width()?$('#topic-options').width()+24:$('#options').width()+24;

$('#topic-options').css({'width': maxWidth+'px'});
$('#options').css({'width': maxWidth+'px'});

$('#options > ul > li > ul').each(function(){
$(this).css({'width' : maxWidth+'px'});
});

$('#options > ul > li').hover(function(){

var sub = getSubnav(this);

if(!sub) return;
$(sub).css({'visibility' : 'visible'});
},
function(){

var sub = getSubnav(this);

if(!sub) return;
$(sub).css({'visibility' : 'hidden'});
});

});

спасибо,Sandeep

Answer 1

http://jsfiddle.net/TEqmH/1/

Отлично работает на моем конце, как в IE7, Firefox и т. Д.: /