IE에서 중첩 된 ul li ul 간격

Question

IE에서 중첩 목록 표시에 문제가있어 파이어 폭스가 완벽하게 표시합니다.

캡쳐 화면과 코드도 첨부하고 있습니다.

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> 

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

스크린 샷 :

코드가 예상대로 중첩 된 목록을 표시 잘 잘 작동 파이어 폭스에서

.

파이어 폭스 (IE7 시험) IE에서

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

리 내측 중첩 UL이 그 부모의 간극을 가지고 아래의 코드 화상으로서 표시. 모든 멍청한 물건을 시험해 보았지만 행운은 없습니다.

IE7은 :

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

저를 도와주세요. 내 jQuery 코드

JQUERY 코드 게시하지 않는

죄송합니다 : IE7, 파이어 폭스에서 모두

 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/

작품 좋은,/