Break out of parent div - css

Question

I am trying to get the the menu on the right side of the search bar to breakout of the parent.
Code: http://jsbin.com/xecolubodi/edit?html,css,js,output
I believe a modified to the following css styles is required:
.mapsearch-menu ul {
display: none;
position: relative;
top: -55px;
padding: 55px 0 0 0;
margin: 0;
user-select: none;
}
.mapsearch-menu ul:hover {
display: block;
}
.mapsearch-menu li {
background: white;
padding: 4px;
list-style: none;
border: 1px solid rgba(0, 0, 0, 0.298039);
margin-top: -1px;
}
.mapsearch-menu input[type=checkbox],
input[type=radio] {
vertical-align: middle;
position: relative;
bottom: 1px;
}
.mapsearch-menu li:hover {
background: #eee;
cursor: pointer;
}
.mapsearch-menu .button {
display: inline-block;
user-select: none;
cursor: pointer;
height: 16px;
width: 16px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAJ0lEQVQ4y2NgGDbgJBD/JxGfQDbgOBkGHB1mYXBi6IfBmdEwIB8AAEQSURX+8q0jAAAAAElFTkSuQmCC");
}
.mapsearch-menu {
display: inline-block;
position: absolute;
top: 0;
right: 0;
margin-top: 12px;
padding-right: 5px;
}
Before click:
After click:
I want the hamburger menu icon to stay stationary and have the dropdown menu either breakout of the parent divs bounds or have the list items right justified.
I have been working on this for an hour and I am not getting anywhere. I tried various things (floating, etc).
ps: I prefer to have the search icon, the search text, and the hamburger all left-floated instead of the hack I am currently doing with padding with the search. If that is easier to fix that first then please attempt (I also been trying to fix that)

Answer 1

I updated your css below, It will probably work for you.
.mapsearch-menu ul {
display: none;
position: absolute; /* Add this you can change it as per you need */
top: -34px; /* Add this */
right:0px; /* Add this you can change it as per you need */
min-width:170px; /* Add this */
padding: 55px 0 0 0;
margin: 0;
user-select: none;
}
.mapsearch-menu .button {
display: inline-block;
user-select: none;
cursor: pointer;
position:relative; /* Add this */
height: 16px;
width: 16px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAJ0lEQVQ4y2NgGDbgJBD/JxGfQDbgOBkGHB1mYXBi6IfBmdEwIB8AAEQSURX+8q0jAAAAAElFTkSuQmCC");
}
.mapsearch-menu li {
background: white;
padding: 4px;
list-style: none;
border: 1px solid rgba(0, 0, 0, 0.298039);
margin-top: -1px;
display:inline-block; /* Add this */
}