CSS兒童菜單LI強制家長的寬度增加

Question

所以我幾乎確切地知道我需要做什麼，但我不知道如何我需要做到這一點。

我有一個下拉菜單，當你將鼠標懸停在上面時，它會打開。當你將鼠標懸停在其上時，孩子會導致父母的寬度增加，這不是我想要的。我知道我需要將孩子定位到絕對位置......但是當我這樣做時，孩子不再出現，而且父母上的懸停似乎不再起作用。任何人都可以幫助確定絕對位置部分需要進入的位置嗎？你可以看到我有我註釋過的東西。

我想讓孩子在「動作」下拉列表的右下方對齊。

我也有一個問題，如果我在父母上設置填充/邊距。它延伸到孩子。我相信我可以解決這個問題，無論是絕對定位，還是解決之後。

這裏是我的HTML：

<br /> 
<div style="width: 90%; margin:auto; background-color:#CCC; height:36px;"> 
<div id="actions"> 
    <ul> 
     <li class="action_arrow_down"><a href="#">Actions</a> 
      <ul> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another Action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class = "separated_action"><a href="#">Separated Link</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

我的CSS：

html, body { 
margin: 0; 
padding: 0; 
height: 100%; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
} 

#actions { 
float: right; 
display: block; 
background-color: #4d90fe; 
color: #FFF; 
font-size: 16px; 
font-family: Arial, Helvetica, sans-serif; 
} 

#actions ul{ 
padding: 0px; 
margin: 0px; 
display: block; 
position: relative; 
overflow: hidden; 
} 

#actions li ul { 
display: none; 
background-color: #ffffff; 
border: #CCC 1px solid; 
/*position:absolute; 
top:100%; 
left:0;*/ 

} 

#actions li ul li { 
    display: block; 
background-color: #ffffff; 
color: #000000; 
overflow: hidden; 
} 

#actions li ul li:hover, #actions li ul li a:hover { 
background-color: #eeeeee; 
} 

#actions li ul li a { 
color: #000000; 
} 

#actions li{ 
line-height: 36px; 
list-style: none; 
font-size: 14px; 
text-indent: 15px; 
} 

#actions li:not(ul li){ 
background-color: #4d90fe; 
} 

#actions li:not(ul li):hover { 
background-color: #0362fd; 
} 

#actions li:hover > ul { 
display: block; 
} 

#actions li a { 
text-decoration: none; 
color: #ffffff; 
display:block; 
} 

#actions li ul li { 
display: block; 
} 

.separated_action { 
border-top: #CCC 1px solid; 
} 

/*.action_arrow_down { 
background-image: url('images/action_arrow_down.png'); 
background-repeat: no-repeat; 
background-position: right center; 
}*/ 

的代碼可能是非常令人費解，並可以使用一些清理。一旦我得到子菜單，我將刪除多餘的部分。

這是jsfiddle。

Answer 1

你已經擁有了它。當你絕對定位它時，你「鬆開」了你的子菜單，是因爲你相對定位了父項。

解決方法是刪除該行：

#actions ul{ 
    padding: 0px; 
    margin: 0px; 
    display: block; 
    /*position: relative; <-- delete this line */ 
    overflow: hidden; 
} 

#actions li ul { 
    display: none; 
    background-color: #ffffff; 
    border: #CCC 1px solid; 
    position:absolute; 
    margin-left: -80px; 
} 

檢查updated Fiddle。

調整margin-left將子菜單左移或右移。默認情況下，父項的左側是子項的左側。如果您要給孩子一個固定的寬度，您可以使用負邊界左對齊右側。

檢查您的2nd updated Fiddle。