Javascript IE7下拉菜单对齐问题
下拉菜单不与其父菜单块对齐，而是显示在右侧。有什么想法吗？所讨论的css是top nav li.menu-item ul.subnav 我已尝试将顶部导航li.menu项设置为relative，将ul.subnav设置为left:0，但运气不佳Javascript IE7下拉菜单对齐问题,javascript,jquery,css,internet-explorer-7,Javascript,Jquery,Css,Internet Explorer 7,下拉菜单不与其父菜单块对齐，而是显示在右侧。有什么想法吗？所讨论的css是top nav li.menu-item ul.subnav 我已尝试将顶部导航li.menu项设置为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 xm
<!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>
谢谢。我还删除了overflow:hidden，当元素从顶部导航设置为相对时，它停止了下拉菜单的工作，并将其设置为position:relative。添加位置：相对于顶部导航li，左侧：0px到顶部导航子导航。看来是你干的！jsiddle.net/hotdiggity/AbbT2只看了一眼。。。李先生失踪了吗？也许只要试着使用CSS top nav.菜单项{zoom:1；}就可以了。谢谢。我还删除了overflow:hidden，当元素从顶部导航设置为相对时，它停止了下拉菜单的工作，并将其设置为position:relative。添加位置：相对于顶部导航li，左侧：0px到顶部导航子导航。看来是你干的@hotdiggity，请确保将您的解决方案作为答案发布，并将其标记为已接受。