Question

所以我几乎完全知道我需要做什么，但我不知道我需要做什么。

我有一个下拉菜单，当您将鼠标悬停在该菜单上时会打开该菜单。当你将鼠标悬停在它上面时，孩子会导致父母的宽度增加，这不是我想要的。我知道我需要将孩子置于绝对的位置...但是当我这样做时，孩子不再出现，并且看起来在父母身上的悬停不再起作用。任何人都可以帮助确定绝对位置部分需要进入的位置吗？你可以看到我有一些我评论过的东西。

我希望孩子能够在＆＃34;行动＆＃34;的右下方对齐。下降。

如果我在父级上设置填充/边距，我也会遇到问题。它延伸到儿童。我相信我可以用绝对定位来解决这个问题，或者在解决之后解决这个问题。

这是我的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。

CSS子菜单LI强制父母的宽度增加

1 个答案: