更改下拉菜單列表

Question

的默認對齊我做了一個簡單的CSS-只有下拉菜單如下面的代碼片段：

.menu-container { 
 
    width: 60px; 
 
    float: right; 
 
    border: 1px solid #999 
 
} 
 

 
.menu-container .menu { 
 
    display: none; 
 
    list-style: none; 
 
    position: absolute; 
 
    min-width: 80px; 
 
    margin: 0; 
 
    padding: 0 
 
} 
 

 
.menu-container:hover .menu, 
 
.menu-container .menu:hover { 
 
    display: block 
 
} 
 

 
.menu-container .menu li { 
 
    border: 1px solid #999; 
 
    text-align: right 
 
}

<div class="menu-container"> 
 
    Go to... 
 
    <ul class="menu"> 
 
    <li> 
 
     <a href="#">Item #1</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">Item #2</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">Item #3</a> 
 
    </li> 
 
    </ul> 
 
</div>

這將是右對齊接近的右邊緣頁。我想列表項對齊到列表標題的右側「轉到...」，像下面的圖片：

應該與列表項的文本長度增長到左。這將避免橫向滾動，但我無法弄清楚如何實現它。請注意，如果需要，可以更改菜單html結構，而不會出現問題。

任何幫助將不勝感激。

Answer 1

給right財產給.menu元素。

像：

.menu { 
    right: 8px; 
} 

.menu-container { 
 
    width: 60px; 
 
    float: right; 
 
    border: 1px solid #999 
 
} 
 

 
.menu-container .menu { 
 
    display: none; 
 
    list-style: none; 
 
    position: absolute; 
 
    min-width: 80px; 
 
    margin: 0; 
 
    padding: 0; 
 
    right: 8px; 
 
} 
 

 
.menu-container:hover .menu, 
 
.menu-container .menu:hover { 
 
    display: block 
 
} 
 

 
.menu-container .menu li { 
 
    border: 1px solid #999; 
 
    text-align: right 
 
}

<div class="menu-container"> 
 
    Go to... 
 
    <ul class="menu"> 
 
    <li> 
 
     <a href="#">Item #1</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">Item #2</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">Item #3</a> 
 
    </li> 
 
    </ul> 
 
</div>

希望這有助於！

Answer 2

首先（如果這是打算）我建議你給.menu-container { position: relative; }所以.menu的位置與此有關。完成後，只需添加.menu { right: 0; }即可使其向左增長。

就像一個旁註：它被廣泛認爲是在CSS聲明塊中最後一個聲明之後省略分號的錯誤做法（儘管有效）。

.menu-container { 
 
    width: 60px; 
 
    float: right; 
 
    border: 1px solid #999; 
 
    position: relative; 
 
} 
 

 
.menu-container .menu { 
 
    display: none; 
 
    list-style: none; 
 
    position: absolute; 
 
    min-width: 80px; 
 
    margin: 0; 
 
    padding: 0; 
 
    right: 0; 
 
} 
 

 
.menu-container:hover .menu, 
 
.menu-container .menu:hover { 
 
    display: block; 
 
} 
 

 
.menu-container .menu li { 
 
    border: 1px solid #999; 
 
    text-align: right; 
 
}

<div class="menu-container"> 
 
    Go to... 
 
    <ul class="menu"> 
 
    <li> 
 
     <a href="#">Item #1</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">Item #2</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">Item #3</a> 
 
    </li> 
 
    </ul> 
 
</div>