Nitish Kumar Nitish Kumar - 7 months ago 12
HTML Question

How to show menu dropdown above any div

I'm facing difficulties with some of the css. I've a menu items where I'm pops up a menu to rename, hide or delete it, I've included the css but its coming below the div present in the menu. I want it on top. Also I'm using bootstrap css.

Snippet:



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





Please help me out. Thanks

Answer

Applying a higher z-index on the dropdown menu will do the trick.

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