如何将内联子菜单的右侧与其父菜单项对齐

Question

我有一个带有子菜单的下拉菜单。两者都以内嵌一个显示在另一个之下。

问题是主菜单向右浮动，因此当显示子菜单时，子菜单开始偏离屏幕右侧。特别是当儿童菜单有很多项目时。

我希望子菜单的右侧与父菜单项的右侧一致。在我的例子中，子菜单的左侧与其父项的左侧对齐。

这可能吗？

以下是来自firebug的一些代码（不确定它是否有用）：

<ul id="menu-main-menu" class="left">
 <li class="divider"></li>
 <li id="menu-item-33" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-33">
 <li class="divider"></li>
 <li id="menu-item-43" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-43">
 <li class="divider"></li>
 <li id="menu-item-44" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-44">
 <li class="divider"></li>
 <li id="menu-item-36" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-36 has-dropdown">
 <li class="divider"></li>
 <li id="menu-item-48" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-48 has-dropdown">
  <a href="#1">PR News</a>
  <ul class="dropdown" style="visibility: hidden; display: none;">
   <li class="title back js-generated">
   <li id="menu-item-52" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-52">
    <a href="#1">SA Courts</a>
   </li>
   <li id="menu-item-50" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-50">
   <li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-51">
   <li id="menu-item-49" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-49">
  </ul>
 </li>
</ul>

Answer 1

尝试

.menu-main-menu li{
    position:relative;
}
.dropdown{
    position:absolute;
    right:0;
}

您可能需要在min-height上添加.menu-main-menu规则，以便子菜单项不会与页面的主要内容重叠。

Answer 2

以下原型可能会对您有所帮助。在子菜单块上使用绝对定位将其定位到父li元素的右边缘。

我发现使用内联块更方便二级菜单项而不是浮点数。如果要使用浮点数，则需要为.sub-nav指定一个with，否则项目只会换行多行，除非顶级标签非常长且次要标签非常短。

.main-nav {
  margin: 0;
  padding: 0;
}
.main-nav li {
  display: block;
  float: left;
  margin-right: 20px;
  border: 1px dotted gray;
  position: relative;
  overflow: visible;
  height: auto;
}
.sub-nav {
  margin: 0;
  padding: 0;
  border: 1px dotted blue;
  position: absolute;
  top: 100%;
  right: 0;
  width: auto;
  white-space: nowrap;
  text-align: center;
}
.sub-nav li {
  float: none;
  display: inline-block;
  margin: 0;
}

<ul class="main-nav">
  <li>First Tag</li>
  <li>Second Tag</li>
  <li>Third Tag</li>
  <li>Fourth Tag
    <ul class="sub-nav">
      <li>First Tag</li>
      <li>Second Tag</li>
      <li>Third Tag</li>
    </ul>
  </li>
</ul>