Make the dropdown placed inside the wrapper with no relative position

so when i hover over my username a dropdown appears. but this box is not always as wide as the username div which is variable width, so it looks weird. I can solve this by changing the position of the dropdown to relative

. But then when the window appears, the whole page moves down. Is there a way to keep the position as absolute

, but still contain it inside the shell? here's a jsFiddle for a demo. Thanks for reading.

<div id = "wrapper" style = "border:1px solid red;">
          <div id = "username">hover over me</div>
            <div id = "accBox">
              <ul>
                <li>sign&nbsp;out</li>
                <li>my&nbsp;profile</li>
                <li>new&nbsp;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;
}