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

【问题标题】：How to align the right side of an inline child menu with its parent menu item如何将内联子菜单的右侧与其父菜单项对齐
【发布时间】：2015-04-02 21:35:36
【问题描述】：

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

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

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

这可能吗？

这是来自 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>

【问题讨论】：

请发布您的代码，这样会更容易调试。我认为在你的情况下你可以使用 position: absolute 作为子菜单

标签： html css

【解决方案1】：

试试

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

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

【讨论】：

【解决方案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>

【讨论】：