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

Question

我有一个包含子菜单的下拉菜单。两者都以内联方式显示在另一个之下。

问题是主菜单向右浮动，所以当显示子菜单时，子菜单开始离开屏幕的右侧。尤其是当儿童菜单中有很多项目时。

我想让子菜单的右侧与父菜单项的右侧一致。在我的情况下，子菜单的左侧与其父项的左侧对齐。

这可能吗？

下面是一些从萤火虫的代码（不知道它有帮助）的：

<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，否则该项目只是包装到多行，除非顶级标签很长，次级标签非常短。

.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>