如何在任何div上方顯示菜單下拉菜單

我正面臨着一些CSS的困難。我有一個菜單項，我彈出一個菜單來重命名，隱藏或刪除它，我已經包含了css，但它的菜單下面出現了div。我想要它。另外我使用引導CSS。如何在任何div上方顯示菜單下拉菜單

段：

.form-group { 
 
    margin-bottom: 15px; 
 
} 
 
.pagesmenu { 
 
    position: relative; 
 
    background-color: #d3edff; 
 
    border-radius: 7px; 
 
    border: 1px solid #cde; 
 
    box-sizing: border-box; 
 
    color: #2b5672; 
 
    height: 39px; 
 
    line-height: 39px; 
 
    padding-left: 12px; 
 
    width: 200px; 
 
} 
 
.pagesmenu.selected { 
 
    background-color: #d3edff; 
 
} 
 
.portlet-body.form { 
 
    background: #f0f3f5; 
 
    padding: 10px; 
 
} 
 
.pageoption { 
 
    float: right; 
 
    display: inline-block; 
 
    margin-right: 10px; 
 
} 
 
.dropdownpageopt { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 100px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 
.dropdownpageopt a { 
 
    color: black; 
 
    padding: 2px 6px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
    z-index: 9999; 
 
} 
 
.dropdownpageopt a:hover { 
 
    background-color: #f1f1f1 
 
} 
 
.pageoption:hover .dropdownpageopt { 
 
    display: block; 
 
}

<div class="form-body ui-sortable" id="nitspopupmenu"> 
 

 
    <div class="form-group ui-sortable-handle" id="div-1"> 
 
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> Home<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span> 
 
    </div> 
 
    </div> 
 
    <div class="form-group ui-sortable-handle" id="div-2"> 
 
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> About Us<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span> 
 
    </div> 
 
    </div> 
 
    <div class="form-group ui-sortable-handle" id="div-3"> 
 
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> Services<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span> 
 
    </div> 
 
    </div> 
 
    <div class="form-group ui-sortable-handle" id="div-4"> 
 
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> Our Team<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span> 
 
    </div> 
 
    </div> 
 
    <div class="form-group ui-sortable-handle" id="div-5"> 
 
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> Portfolio<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span> 
 
    </div> 
 
    </div> 
 
    <div class="form-group ui-sortable-handle" id="div-6"> 
 
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> Clients<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span> 
 
    </div> 
 
    </div> 
 
    <div class="form-group ui-sortable-handle" id="div-7"> 
 
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> Blog<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span> 
 
    </div> 
 
    </div> 
 
    <div class="form-group ui-sortable-handle" id="div-8"> 
 
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> Contact<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span> 
 
    </div> 
 
    </div> 
 
</div>

請幫助我。謝謝

來源

2016-05-04 Nitish Kumar

https://jsfiddle.net/64egLfyr/ –

在下拉菜單上應用更高的z-index會有幫助。

.dropdownpageopt { 
    z-index:1; // can make this higher if required. eg, 99 
}

來源

2016-05-04 05:48:07 partypete25

感謝它的工作！ –

.pagesmenu { 
    position: inline-block; 
    background-color: #d3edff; 
    border-radius: 7px; 
    border: 1px solid #cde; 
    box-sizing: border-box; 
    color: #2b5672; 
    height: 39px; 
    line-height: 39px; 
    padding-left: 12px; 
    width: 200px; 
}

來源

2016-05-04 05:49:21

可以使用Z-指數總體上.dropdownpageopt類instean裏面每一個環節，使整個白盒，其餘裏面它可以放在上面，像這樣：

.dropdownpageopt { 
    z-index: 99; 
}

可以追加的z-index你的CSS代碼段中包括.dropdownpageopt類，例如：

.dropdownpageopt { 
    display: none; 
    position: absolute; /*<-- this is needed to make z-index work*/ 
    background-color: #f9f9f9; 
    min-width: 100px; 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
    margin-top: -30px; 

    z-index: 99; /*<---this*/ 


    }

或在本節：

.pageoption:hover .dropdownpageopt { 
    display: block; 
    z-index: 99; /*<---this*/ 
}

你的情況的問題是，Z-指數只能posiotioned元素（即：絕對/固定/相對的），你did'nt放在裏面dropdownpageopt鏈接（其解釋：Here.）。即使你做了，z-index是有效的，它只會在內部的鏈接中工作，而白色的盒子不會在最上面。所以你需要把z-index放在整個dropdownpageopt類中。

和值不一定必須是99甚至9999，我已經嘗試了2 & 1 on .dropdownpageopt並且它工作。

- 我希望這可以幫到你。

來源

2016-05-04 06:41:58 DikaDikz

如何在任何div上方顯示菜單下拉菜單

回答

相關問題