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。