使下拉框适合在没有相对位置的包装内

Question

所以当我将鼠标悬停在我的用户名 div 上时，会出现一个下拉框。但是这个框并不总是像用户名 div 那样宽，它是可变宽度的，所以看起来很奇怪。我可以通过将下拉框的位置更改为 relative 来解决这个问题。但是当框出现时，整个页面向下移动。有没有办法将位置保持为 absolute 但仍将其包含在包装器中？这里是 jsFiddle 来演示。感谢阅读。

<div id = "wrapper" style = "border:1px solid red;">
          <div id = "username">hover over me</div>
            <div id = "accBox">
              <ul>
                <li>sign out</li>
                <li>my profile</li>
                <li>new account</li>
              <ul>
            </div>
        </div>


   #username{
       color:grey;
       cursor:default;

    }

#accBox{
    border:1px solid grey;
    display:none;
    position:absolute;
    background-color:#fff;
}

#accBox ul{
        font-family:Arial, Helvetica, sans-serif;
        padding:0px;
        margin:0px;
}

#accBox li{
    list-style:none;
    margin: 0px;
    padding:6px;
    overflow:hidden;
    font-size:13px;
    cursor:pointer;
    text-align:left;
}

#accBox li:hover{
              background-color: #DAD6D6;
}

Answer 1

首先，您需要在父级 div 上设置 position: relative，以便它包含您的 absolute 下拉列表：

<div style = "border:1px solid red;position: relative;">

接下来您可以在下拉菜单上设置 left: 0; right: 0 以使其采用宽度：

#accBox{
    border:1px solid grey;
    display:none;
    position:absolute;
    background-color:#fff;
    left: 0;
    right: 0;
}

FIDDLE

Answer 2

看到这个fiddle

只需添加

left:8px;
right:8px;

这将使无序列表项与 div 容器 #accBox 一样宽。较小的值会增加其宽度，较大的值会减小其宽度。

到#accBox

使下拉框适合在没有相对位置的包装内

make dropdown box fit inside wrapper without relative position

html

javascript

css

看到这个fiddle