突破父div

Question

我正试图让搜索栏右侧的菜单突破父母。

代码：http://jsbin.com/xecolubodi/edit?html,css,js,output

我认为需要修改为以下css样式：

.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;
}

点击之前：

点击后：

我希望汉堡菜单图标保持静止，并让下拉菜单突破父divs边界或让列表项右对齐。

我一直在研究这个问题一个小时，我没有到达任何地方。我尝试了各种各样的东西（浮动等）。

ps：我更喜欢让搜索图标，搜索文本和汉堡包都悬空，而不是我目前用搜索填充的黑客。如果这更容易解决，那么请尝试（我也一直试图解决）

Answer 1

我在下面更新了你的CSS，它可能适合你。

.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 */
}