將CSS下拉菜單的最后一個子菜單右對齊

Question

想要此css下拉菜單的最后一個子菜單右對齊： https : //jsfiddle.net/mishka00/p6cyy5p7/ 。 它當前右對齊（不正確）只是為了顯示所需的最終結果。 嘗試了right:0和left:auto各種組合，但無法弄清楚。

Answer 1

只需將此代碼添加到您的CSS

#nav ul li:last-of-type {
    float: right;
}

Answer 2

參見https://jsfiddle.net/sjmcpherso/b1p​​yqLpc/

#nav ul li:last-child ul {
  right:0px;left:auto;
  text-align:right;
  background:white;
}

加加位置：相對於父位置

Answer 3

1. 添加position: relative #nav ul li position: relative

2. 加上right: 0; 適用於#nav ul li:last-child ul

 #nav ul { padding:0; margin:0; list-style:none; } #nav ul li { float:left; border:1px solid #fff; margin:0 30px; position: relative; } #nav ul li a { display:block; padding:10px 6px; position:relative; } #nav ul li:hover { border-left:1px solid #E9E9E9; border-right:1px solid #E9E9E9; border-top:1px solid #E9E9E9; } #nav ul li ul { display:none; } #nav ul li:hover ul { display:block; position:absolute; z-index: 10; background:#fff; width:150px; border:0; } #nav ul li ul li { display:block; position:relative; border:none; float:none; margin:0; left:-1px; } #nav ul li ul li:hover { border:none; background:#F7F9FB; } #nav ul li ul li a { padding:10px; border:1px solid #E9E9E9; } #nav ul li:last-child ul { right: 0; background:white; } #nav ul li:last-child ul li{ left:1px; } 

 <div id="nav"> <ul> <li><a href="#">Menu1</a> <ul> <li><a href="menu.html">Item1</a> </li> <li><a href="menu.html">Item2</a> </li> <li><a href="menu.html">Item3</a> </li> <li><a href="menu.html">Item4</a> </li> </ul> </li> <li><a href="#">Menu2</a> <ul> <li><a href="menu.html">Item1</a> </li> <li><a href="menu.html">Item2</a> </li> <li><a href="menu.html">Item3</a> </li> <li><a href="menu.html">Item4</a> </li> </ul> </li> <li><a href="#">Menu3</a> <ul> <li><a href="menu.html">Item1</a> </li> <li><a href="menu.html">Item2</a> </li> <li><a href="menu.html">Item3</a> </li> <li><a href="menu.html">Item4</a> </li> </ul> </li> </ul> </div> <div style='clear: both;margin-bottom:5px;'></div> <div style='border-top:1px solid navy;'></div>