打破父母分區

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

點擊之前：

---

後點擊：

我想漢堡包菜單圖標保持平穩，並有父div的邊界的下拉菜單中無論是突破還是有列表項右對齊。

我一直在這個工作了一個小時，我沒有得到任何地方。我嘗試過各種東西（漂浮等）。

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