Need a starting point for your menu design? Here's a quick example to steer you in the right direction! There are some potential improvements to consider, like delaying the display:none to allow clicking on menu links. If you need further assistance, just drop a comment and I'll be happy to help.
#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: 100%;
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">
<a href="/"><img class="img-responsive2" src="https://static.tumblr.com/e2rgcy1/e6Yod1iwo/pop-out-icon.png"></a>
</div>
<div class="menu">
<p><a href="#">Home</a></p>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">Post 1</a></li>
<li><a href="#">Post 2</a></li>
</ul>
<p><a href="#">Products</a></p>
<p><a href="#">About</a></p>
</div>
</div>
For hands-on experimentation, check out the codepen link where you can make your own tweaks: http://codepen.io/XanderLuciano/pen/YGPoqE
To reveal the menu when hovering over the button using CSS, I utilized the + selector. When .button:hover is activated, the adjacent div class="menu" changes from display:none to block. Here's an excerpt of the code:
#btn-holder > .button:hover + .menu {
display: block;
}
If you need clarification or have any questions, feel free to reach out! :)