IE7 드롭 다운 메뉴 정렬 문제

드롭 다운이 상위 메뉴 블록과 정렬되지 않고 오른쪽에 나타납니다. 어떤 아이디어? 문제의 CSS는 # top-nav li.menu-item ul.subnav입니다.IE7 드롭 다운 메뉴 정렬 문제

# top-nav li.menu-item을 "relative"로 설정하고 ul.subnav를 "left : 0"으로 설정해 보았습니다. 운.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style> 
    /* @group Top Nav */ 
#top-nav { font: 1em Helvetica, Arial, sans-serif; color: #333; clear: right; float: right; list-style: none; z-index: 999; overflow: hidden; padding: 0; margin: 5px 0 10px; width: 640px;} 
#top-nav a {text-decoration: none; } 
#top-nav li { float: left; margin: 0; } 
#top-nav .relative { margin: 5px 0 0 0; position: relative; width: 136px; } 
#top-nav a { float: left; margin: 0 3px; font-size: 16px; outline: none; padding-left: 6px; color: #969; display: inline; } 
#top-nav li.wf-active a { color: #636; } 
#top-nav li li.wf-active a { color: #333; } 
#top-nav a:hover { text-decoration: none; } 
/*Sub Navigation*/ 
#top-nav li.menu-item ul { display: none; } 
#top-nav li.menu-item a:hover ul.subnav { display: block; } 

#top-nav li.menu-item ul.subnav { list-style-type: none; margin: 0 0 0 2px; padding: 0px; position: absolute; top: 30px; width: 100px; z-index: 1000; } 

#top-nav li.menu-item ul.subnav li { float: none; } 
#top-nav .subnav a { display: block; font-size: 15px; margin: 0 0 0 4px; padding: 5px 0 5px 8px; width: 100px; color: #333; } 
#top-nav .subnav a:hover { background-color: #F4E9FF; color: #666; } 
#top-nav .subnav a:visited { color: #333; } 
.subhover { position: relative; } 
ul#top-nav li a span { display: block; padding-right: 10px; padding-left: 4px; padding-top: 9px; height: 32px; } 
ul#top-nav li a { cursor: pointer; } 

/* @end */ 
    </style> 
<script language="JavaScript" SRC="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script> 
    // Top navigation 
$(function(){var is_selected=false; 
$('#top-nav li.menu-item').hover(function(){$('ul',this).show();var j_tab=$(this).children('a');if(j_tab.hasClass('selected')) 
{is_selected=true;j_tab.removeClass('selected');j_tab.addClass('menu-tab');} 
else 
{j_tab.addClass('menu-tab');}},function(){$('ul',this).hide();var j_tab=$(this).children('a');if(is_selected) 
{is_selected=false;j_tab.addClass('selected');j_tab.removeClass('menu-tab');} 
else 
{j_tab.removeClass('menu-tab');}});});$(function() 
{var empty_class=false;$('#top-nav li.childless').hover(function(){var j_tab=$(this).children('a');if(j_tab.hasClass('selected')) 
{empty_class=true;j_tab.removeClass('selected');j_tab.addClass('hover-tab');} 
else 
{j_tab.addClass('hover-tab');}},function(){var j_tab=$(this).children('a');if(empty_class) 
{empty_class=false;j_tab.addClass('selected');j_tab.removeClass('hover-tab');} 
else 
{j_tab.removeClass('hover-tab');}});});$(function() 
{$('.inactive').focus(function() 
{$(this).removeClass("inactive").addClass("active");});$('.active').blur(function() 
{$(this).removeClass("inactive").addClass("active");}); 
}); 
</script> 
</head> 
<body> 
    <ul id="top-nav" > 
    <li class="childless"><a href="/" title="" >Menu item #1</a></li> 
    <li class="menu-item"><a href="/" title="">Menu item #2</a> 
    <ul class="subnav"> 
    <li><a href="/" title="">Menu item #2</a></li> 
    <li><a href="/" title="">Menu item #3</a></li> 
    <li><a href="/" title="">Menu item #4</a></li> 
    <li><a href="/" title="">Menu item #5</a></li> 
    <li><a href="/" title="">Menu item #6</a></li> 
    <li><a href="/" title="">Menu item #7</a></li> 
    <li class="last"><a href="/" title="">Menu item #8</a></li> 
    </ul> 
    </li> 
    <li class="menu-item"><a href="/" title="">Menu item #2</a> 
    <ul class="subnav"> 
    <li><a href="/" title="">Menu item #2</a></li> 
    <li><a href="/" title="">Menu item #3</a></li> 
    <li><a href="/" title="">Menu item #4</a></li> 
    <li><a href="/" title="">Menu item #5</a></li> 
    <li><a href="/" title="">Menu item #6</a></li> 
    <li><a href="/" title="">Menu item #7</a></li> 
    <li class="last"><a href="/" title="">Menu item #8</a></li> 
    </ul> 
    </li> 
    <li class="menu-item"><a href="/" title="">Menu item #4</a> 
    <ul class="subnav"> 
    <li><a href="/" title="">Menu item #2</a></li> 
    <li><a href="/" title="">Menu item #3</a></li> 
    <li><a href="/" title="">Menu item #4</a></li> 
    <li><a href="/" title="">Menu item #5</a></li> 
    <li><a href="/" title="">Menu item #6</a></li> 
    <li><a href="/" title="">Menu item #7</a></li> 
    <li class="last"><a href="/" title="">Menu item #8</a></li> 
    </ul> 
    </li> 
    <li class="childless"><a href="/" title="" >Menu item #5</a></li> 
    </ul> 
</body> 
</html>

출처

2012-05-06 hotdiggity

짧은 모양 만 ... has has hasLayout'이 (가) 있습니까? 어쩌면 CSS'# top-nav .menu-item {zoom : 1; }' –

[jsfiddle version] (http://jsfiddle.net/gRaMV/)이 질문을 보는 다른 모든 사람들을위한 것입니다. –

감사합니다. 나는 또한 "overflow : hidden"(엘리먼트가 상대적으로 만들어 졌을 때 drop downs 작업을 멈 춥니 다)을 # top-nav에서 제거하여 "positon : relative"로 만들었습니다. # top-nav li에 "position : relative"를 추가하고 # top-nav .subnav에 "left : 0px"를 추가했습니다. 트릭을 완료 한 것 같습니다! http://jsfiddle.net/hotdiggity/AbbT2/ – hotdiggity

출처

2012-05-09 10:59:21 hotdiggity

IE7 드롭 다운 메뉴 정렬 문제

답변

관련 문제