0

下拉菜单与其父菜单块不对齐，而是显示在右侧。有任何想法吗？有问题的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>
4

1 回答 1

0

谢谢。我还从#top-nav 中删除了“溢出：隐藏”（当元素被设为相对时，下拉菜单停止工作）并将其设为“位置：相对”。在#top-nav li 中添加了“位置：相对”，在#top-nav .subnav 中添加了“左：0px”。似乎已经成功了！jsfiddle.net/hotdiggity/AbbT2

于 2012-05-09T10:59:21.680 回答