Make a div adjust to borders?

So i have the following html/css code

* {
    box-sizing: border-box;
}

.mainlink {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 30px;
    color: rgba(255,0,0,0.7);
    transition: 0.3s ease-in-out;
    text-decoration: none;
    padding: 10px;
}

.mainbtn {
    transition: 0.3s ease-in-out;
    border: 1px solid rgba(255,0,0,1);
    width: 40%;
    position: relative;
    margin: auto;
    height: auto;
}

div.content {
    position: absolute;
    transform: translate(-1px,1px);
    width: 100%;
}

.content a {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 22px;
    color: rgba(255,0,0,0.7);
    display: block;
    list-style: none;
    background-color: #eee;
    transition: 0.2s ease-in-out;
    cursor: pointer;
    text-decoration: none;
    padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainbtn">
  <a href="#" class="mainlink">Hello</a>
  <div class="content">
    <a href="#">World</a>
    <a href="#">You</a>
    <a href="#">Me</a>
  </div>
</div>

The goal of this little exercise was to create a dropdown menu. So hovering above the "Hello" and the div with class="mainbtn" should expand the list of links (I've left out the animations and transitions since that isn't part of the problem). The problem is that the links inside the div with class="content" does not expand all the was to the edge of boarder of the div with class="mainbtn". At first i thought a simple box-sizing: border-box would fix the problem but it doesn't. Any idea how i can make the div with class="content" and the links inside it have the width of the entire div with class="mainbtn" PLUS its border?

I find that it is easier to make a custom dropdown if you wrap the links that are supposed to appear in a ul tag.

In this fiddle I added the mainlink anchor tag into the content div then wrapped the other links in a ul tag with li tags around the anchor tags like so:

<div class="mainbtn">
    <div class="content">
        <a href="#" class="mainlink">Hello</a>
        <ul>
            <li><a href="#">World</a></li>
            <li><a href="#">You</a></li>
            <li><a href="#">Me</a></li>
        </ul>
    </div>
</div>

Then I use the css below to achieve the result that you see in the fiddle.

.content ul {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

.content .mainlink:hover ~ ul,
.content .mainlink ~ ul:hover {
    display: block;
}

I also took the border from the mainbtn class and put it on the content class so the border would expand when the dropdown appears. You can see that here in this updated fiddle.

.mainbtn {
    transition: 0.3s ease-in-out;
    width: 40%;
    position: relative;
    margin: auto;
    height: auto;
}

div.content {
    position: absolute;
    transform: translate(-1px,1px);
    width: 100%;
    border: 1px solid rgba(255,0,0,1);
}