Jquery IE中的嵌套ul-li-ul间隙

我在IE中显示嵌套列表时遇到问题，firefox显示得非常完美

我还附上了截图和代码

HTML代码：

<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>

截图：

在firefox中，代码运行良好，可以按照预期显示嵌套列表

火狐：

在IE7中测试的IE中，代码显示为下图，li中嵌套的ul与其父级之间存在间隙。尝试了所有的东西，但没有运气

IE7：

请帮帮我

很抱歉没有发布我的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'});
});

});

谢谢， 桑德普

---

在IE7、firefox等方面都可以很好地工作：//

我在帖子中提到了IE7thnks，以供回复。。我已经附加了我的jquery代码，它在鼠标点击标题时显示列表，在mouseover上打开内部列表，并隐藏MouseAve上的所有内容。如果我添加，则它在firefox中可见，但mouseover动画不起作用…：为什么它在IE7中为你工作？？！！！！我刚刚在IE7中打开了你的链接，但这不起作用……我正在IE9中使用IE7设置进行测试。你的手机上有IE7吗？看，我认为唯一的解决方案是使用IE7特定的CSS，然后使用CSS条件

     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'});
});

});