親部門の中断

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の境界のドロップダウンメニューのいずれかのブレイクアウトを持っているか、右詰め、リストアイテムを持っていると思います。

私はこれを1時間作業していますが、私はどこにもいません。私は様々なことを試みました（フローティングなど）。

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