In my webpage, I have a drop-down menu that traditionally pushes the content below it down to make space for its items. However, I want the drop-down to overlap the contents below without affecting their position.
I've tried various solutions, such as applying z-index: 1; to the drop-down list, but nothing seems to work as intended.
<td valign="top" class="navigationLink" style="width: 20%" >
<div class="reportDiv">
<h:outputLabel value="Report" rendered="#{welcomeBean.report}" class="reportMenu"/>
<ul class="reportUL" >
<li><h:link value="Project Wise Report" outcome="/webpages/ProjectWiseReport.xhtml" rendered="true" class="reportItems"/></li>
<li><h:link value="Employee Wise Report" outcome="/webpages/EmployeeWiseReport.xhtml" rendered="true" class="reportItems"/></li>
</ul>
</div>
</td>
This drop-down constitutes one row of a table within which I've placed the webpage's contents. When I click on the My Account label, the ul drops down, increasing the height of the table row and pushing the one below it down. My goal is to have the drop-down overlapping the next row's contents instead.
Additional code snippets above and below this segment
<div class="container">
<table border="0" cellpadding="2" style="width: 100%;">
<tr style="background-color: #95D0CA;">
<td colspan="2">
</td>
</tr>
<tr style="position: relative; z-index:1;">
<td colspan="2" valign="top">
<table border="0" cellspacing="2" cellpadding="2" class="templateBody" style="width: 100%;">
<tr >
<td>
</td>
<td valign="top" class="navigationLink" style="width: 20%" >
<div class="reportDiv">
<h:outputLabel value="Report" rendered="#{welcomeBean.report}" class="reportMenu"/>
<ul class="reportUL" >
<li><h:link value="Project Wise Report" outcome="/webpages/ProjectWiseReport.xhtml" rendered="true" class="reportItems"/></li>
<li><h:link value="Employee Wise Report" outcome="/webpages/EmployeeWiseReport.xhtml" rendered="true" class="reportItems"/></li>
</ul>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" valign="top" style="width: 100%">
<div class="contentBody">
</div>
</td>
</tr>
</table>
</div>
I'll provide some snapshots to illustrate the issue better and seek your guidance accordingly.
Pre-drop-down expansion image: !(https://i.stack.imgur.com/p1vFX.jpg)
Image showing the appearance after expanding the drop-down: !(https://i.stack.imgur.com/GTNkI.jpg)
I attempted using jsFiddle as suggested by many, but it did not display my code correctly, hindering the troubleshooting process.
Please assist me with resolving this issue, and let me know if you require additional scripts or details. **Thank You in Advance :)**
**Edit**
Inclusion of CSS and JavaScript codes
CSS Code corresponding to the provided markup:
.navigationLink a
{
background-color: #95D0CA;
margin-top: 5px;
margin-bottom: 5px;
}
.navigationLink label
{
background-color: #95D0CA;
margin-top: 5px;
margin-bottom: 5px;
}
.reportMenu
{
text-decoration: none;
color: #216961;
font-weight: bold;
font-size: 15px;
display: block;
padding: 10px 5px 10px 5px;
text-align: center;
cursor: pointer;
}
.reportItems
{
color: white;
text-decoration: none;
font-weight: 400;
font-size: 15px;
padding: 10px;
background-color: #95D0CA;
text-align: center;
}
.container
{
width: 1000px;
background-color: whitesmoke;
padding: 10px;
margin: 50px auto;
position: relative;
}
.templateBody
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width: auto;
}
.templateBody td
{
text-align:center;
}
.contentBody
{
background-color: whitesmoke;
margin: 10px 0px 10px 0px;
width: 100%;
position: relative;
clear: both;
}
.reportUL
{
list-style-type: none;
position: absolute;
z-index: 1;
padding: 0;
margin: 0;
text-align: left;
}
.reportUL li
{
background-color: #95D0CA;
}
JQuery Script :
$(document).ready(function()
{
//Some JQuery functions here
});