Question

下拉列表与其父菜单块不对齐，而是显示在右侧。有任何想法吗？有问题的CSS是＃top-nav li.menu-item ul.subnav

我尝试将＃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>

Answer 1

感谢。我还从＃top-nav中删除了“overflow：hidden”（它停止了元素相对的下拉工作）并使其成为“positon：relative”。将“position：relative”添加到＃top-nav li，将“left：0px”添加到＃top-nav .subnav。似乎已经完成了这个伎俩！ jsfiddle.net/hotdiggity/AbbT2

IE7下拉菜单对齐问题

1 个答案: