Dropdown button holder issue - css

Question

I'm having issues getting this button to stay in the button holder which floats above my site content. How would I add a drop down menu and this keep it in the same button holder.
.btn-holder {
background: rgba(255, 255, 255, 0.5);
position: static;
z-index: 10;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
.button {
transform: translate(-50%, -50%);
background-color: #a137a7;
border: none;
color: white;
padding: 8px 13px;
text-align: center;
text-decoration: none;
font-size: 16px;
position: absolute;
cursor: pointer;
right: -1%;
bottom: -1%;
font-family:'Source Sans Pro', sans-serif;
opacity: .8; }
.button:hover {
background-color: #732878; /* Green */
color: white;
}
<div class="btn-holder">
<div class="button"><a href="/"><img class="img-responsive2"
src="http://static.tumblr.com/e2rgcy1/e6Yod1iwo/pop-out-icon.png"></a></div>
</div>
<!-- begin snippet: js hide: false console: true babel: false -->

Answer 1

Here's a quick example that should help get you started in the right direction! A few improvements could be made (such as delaying the display:none so that you can actually click links in the menu), but you should be able to figure that out. If not just let me know in the comments and I'll improve it.
#btn-holder {
background: rgba(255, 255, 255, 0.5);
position: static;
z-index: 10;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
#btn-holder > .button {
transform: translate(-50%, -50%);
background-color: #a137a7;
border: none;
color: white;
padding: 8px 13px;
text-align: center;
text-decoration: none;
font-size: 16px;
position: absolute;
cursor: pointer;
right: -1%;
bottom: -1%;
font-family: 'Source Sans Pro', sans-serif;
opacity: .8;
border-radius: 3px;
}
#btn-holder > .button:hover {
background-color: #732878;
color: white;
}
#btn-holder > .menu {
opacity: 0;
transition: opacity .5s;
width: 100px;
transform: translate(-50%, -50%);
background-color: #333;
border: none;
color: white;
padding: 8px;
text-align: left;
text-decoration: none;
font-size: 16px;
position: absolute;
right: 0%;
bottom: 25px;
box-shadow:0 2px 7px rgba(0,0,0,.4);
}
.menu a {
text-decoration: none;
color: #eee;
transition: color .3s;
}
.menu a:hover {
color: #2196f3;
}
.menu > ul {
list-style: none;
margin: 2px;
padding: 0 0 0 15px;
}
.menu > ul > li:first-child {
margin-left: -15px;
}
.menu p {
opacity: 1;
margin: 0;
}
.menu p:after {
content:"";
display: block;
height: 1px;
vertical-align: bottom;
width: 100%;
border-top: 1px solid #eee;
opacity: .4;
}
#btn-holder > .button:hover + .menu {
opacity: 1;
transistion-delay: 1s;
}
#btn-holder .menu:hover {
opacity: 1;
}
<div id="btn-holder">
<div class="button">
<img class="img-responsive2" src="https://static.tumblr.com/e2rgcy1/e6Yod1iwo/pop-out-icon.png">
</div>
<div class="menu">
<p>Home</p>
<ul>
<li>Blog</li>
<li>Post 1</li>
<li>Post 2</li>
</ul>
<p>Products</p>
<p>About</p>
</div>
</div>
Here's a codepen of it that you can use to try your own changes on: http://codepen.io/XanderLuciano/pen/YGPoqE
I used the CSS + selector to select the div class="menu" that occurs right after the div class="button" and changed it's display from none to block when .button:hover is active. The code looks like this:
#btn-holder > .button:hover + .menu {
display: block;
}
Let me know if you have any questions! :)

Answer 2

#btn-holder {
background: rgba(255, 255, 255, 0.5);
position: static;
z-index: 10;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
#btn-holder > .button {
transform: translate(-50%, -50%);
background-color: #a137a7;
border: none;
color: white;
padding: 8px 13px;
text-align: center;
text-decoration: none;
font-size: 16px;
position: absolute;
cursor: pointer;
right: -1%;
bottom: -1%;
font-family: 'Source Sans Pro', sans-serif;
opacity: .8;
border-radius: 3px;
}
#btn-holder > .button:hover {
background-color: #732878;
color: white;
}
#btn-holder > .menu {
opacity: 0;
transition: opacity .5s;
width: 100px;
transform: translate(-50%, -50%);
background-color: #333;
border: none;
color: white;
padding: 8px;
text-align: left;
text-decoration: none;
font-size: 16px;
position: absolute;
right: 0%;
bottom: 25px;
box-shadow:0 2px 7px rgba(0,0,0,.4);
}
.menu a {
text-decoration: none;
color: #eee;
transition: color .3s;
}
.menu a:hover {
color: #2196f3;
}
.menu > ul {
list-style: none;
margin: 2px;
padding: 0 0 0 15px;
}
.menu > ul > li:first-child {
margin-left: -15px;
}
.menu p {
opacity: 1;
margin: 0;
}
.menu p:after {
content:"";
display: block;
height: 1px;
vertical-align: bottom;
width: 100%;
border-top: 1px solid #eee;
opacity: .4;
}
#btn-holder > .button:hover + .menu {
opacity: 1;
transistion-delay: 1s;
}
#btn-holder .menu:hover {
opacity: 1;
}
<div id="btn-holder">
<div class="button">
<img class="img-responsive2" src="https://static.tumblr.com/e2rgcy1/e6Yod1iwo/pop-out-icon.png">
</div>
<div class="menu">
<p>Home</p>
<ul>
<li>Blog</li>
<li>Post 1</li>
<li>Post 2</li>
</ul>
<p>Products</p>
<p>About</p>
</div>
</div>