IE7下拉菜單對齊問題

下拉菜單與它的父菜單塊不一致，而是顯示在右邊。有任何想法嗎？有問題的CSS是＃top-nav li.menu-item ul.subnavIE7下拉菜單對齊問題

我試着將＃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

只有一個簡短的看看...是缺少'hasLayout'嗎？也許只是嘗試使用CSS'＃top-nav .menu-item {zoom：1; }' –

[jsfiddle版本]（http://jsfiddle.net/gRaMV/）查看這個問題的其他人。 –

謝謝。我也從＃top-nav中刪除了「overflow：hidden」（它阻止了元素相對的工作），並將其設置爲「positon：relative」。向＃top-nav li添加「position：relative」，將「left：0px」添加到＃top-nav .subnav。似乎已經做到了！ http://jsfiddle.net/hotdiggity/AbbT2/ – hotdiggity

謝謝。我也從＃top-nav中刪除了「overflow：hidden」（它阻止了元素相對的工作），並將其設置爲「positon：relative」。向＃top-nav li添加「position：relative」，將「left：0px」添加到＃top-nav .subnav。似乎已經做到了！ jsfiddle.net/hotdiggity/AbbT2

來源

2012-05-09 10:59:21 hotdiggity

IE7下拉菜單對齊問題

回答

相關問題