如何將內聯子菜單的右側與其父菜單項對齊

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>