CSS menu in lefthand table cell displaying behind righthand cell

[ballr]

Hello,

I have a CSS menu that is in a lefthand table cell that has a fly-out submenu. When the submenu displays it is behind the text that is in the righthand table cell.

I need to have the submenu display on top. I tried modifying the z-index with no results.

Here is the code for the page:


<%@ Master Language="C#" MasterPageFile="/masterpages/TestAmericaMaster.master" AutoEventWireup="true" %>

<asp:content ContentPlaceHolderId="PageBody" runat="server">
<style type="text/css">
.menu2{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:330px;
height:160px;
position:absolute;
font-size:12px;
margin:0 0;
z-index:10;
}
.menu2 ul {
padding:0;
margin:0 0 0 -10px;
list-style-type: none;
background:#eee;
width:330px;
height:160px;
border:1px solid #2356B6;
}
.menu2 ul li ul {
visibility:hidden;
position:absolute;
height:0;
overflow:hidden;
top:0;
left:195px;
}
.menu2 ul li {
float:left;
}
.menu2 ul li a, .menu2 ul li a:visited {
display:block;
float:left;
text-decoration:none;
color:#000;
width:200px;
height:auto;
line-height:25px;
font-size:12px;
background:transparent;
padding-left:10px;
}
* html .menu2 ul li a, * html .menu2 ul li a:visited {
width:100px;
w\idth:90px;}

.menu2 table {
border-collapse:collapse;
border:0;
margin:0;
padding:0;
font-size:1em;
position:absolute;
left:0;
top:0;
}

/* first line for IE7 and non-IE browsers - second line for IE5.5 and IE6 */

.menu2 ul li:hover a,
.menu2 ul li a:hover{
background:#2356B6;
color:#fff;
}

.menu2 ul li:hover {position:relative; z-index:90;}
* html .menu2 ul li a:hover {position:relative; z-index:100;}

.menu2 ul li:hover ul,
.menu2 ul li a:hover ul {
visibility:visible;
position:absolute;
height:auto;
border:1px solid #2356B6;
background:#7a7a7a;
overflow:visible;
}
.menu2 ul li:hover ul li a,
.menu2 ul li a:hover ul li a{
display:block;
background:transparent;
color:#fff;
line-height:15px;
padding:5px 0 5px 10px;
height:auto;
text-decoration:underline;
width:auto;
}

.menu2 ul li:hover ul li:hover a,
.menu2 ul li a:hover ul li a:hover {
background:#2356B6;
color:#fff;
width:100px;
}
.menu2 ul li:hover ul li ul,
.menu2 ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height:0;
overflow:hidden;
top:0;
left:105px;
}
.menu2 ul li:hover ul li:hover ul,
.menu2 ul li a:hover ul li a:hover ul {
visibility:visible;
position:absolute;
height:auto;
color:#000;
padding:0;
border:1px solid #2356B6;
list-style-type:none;
background:#7a7a7a;
}
.menu2 ul li:hover ul li:hover ul li a,
.menu2 ul li a:hover ul li a:hover ul li a {
display:block;
background:transparent;
color:#fff;
}

.menu2 ul li:hover ul li:hover ul li:hover a,
.menu2 ul li a:hover ul li a:hover ul li a:hover {
background:#2356B6;
color:#fff;
}
</style>

<div style="padding-bottom: 5px; padding-bottom: 10px;">
<h2>SOURCE AIR TESTING</h2>
&nbsp; &nbsp;
<!--<select style="margin-top: 12px" name="jumpMenu" size="1" id="jumpMenu">
<option selected="true">Select a Market Here</option>
<option>Source Air Testing</option>
<option>Drinking Water Testing</option>
<option>Radiological Testing</option>
</select>-->
</div>
<div id="SpecialtyTop">
<img src="/images/long_wave_transparent.png" width="816" height="31" id="servicesHeaderImage" alt="" />
<table width="97%" border="0" cellspacing="0" cellpadding="5">
<tr>
<!--<td class="bottomborder" width="340" height="45" valign="middle">
<h2>

</h2>
</td>
<td class="leftborder bottomborder" width="456" valign="middle">
<div dir="ltr" align="left">

</div>
</td>-->
</tr>
<tr>
<td valign="top">
<h3>Specialty Offerings</h3>
</td>
<td class="leftborder" valign="top">
<h3><umbraco:Item field="SpecialtyServiceDescriptionTitle" runat="server"></umbraco:Item></h3>
</td>
</tr>
<tr>
<td width="340" valign="top">
<div style="width: 330px; height: 150px; padding: 5px">
<umbraco:Macro Alias="SpecialtyServiceFlyout" runat="server"></umbraco:Macro>
</div>
</td>
<td class="leftborder" width="456" valign="top">
<div style="height: 150px; padding: 5px">
<p align="left"><umbraco:Item field="SpecialtyServiceDescription" runat="server"></umbraco:Item></p>
</div>
</td>
</tr>
</table>
</div>
<div id="SpecialtyBottom">
<div id="SpecialtyBottomLeft">
<div id="SpecialtyNews">
<img src="/images/short_wave_transparent.png" width="330" height="23" id="servicesHeaderImage" alt="" />
<h4>News and Events</h4>
<umbraco:Item field="SpecialtyServiceNews" runat="server"></umbraco:Item>
</div>
<div id="SpecialtyPublications">
<img src="/images/short_wave_transparent.png" width="330" height="23" id="servicesHeaderImage" alt=""/>
<h4>Publications</h4>
<umbraco:Item field="SpecialtyServicePublications" runat="server"></umbraco:Item>
</div>
</div>

<!--<div id="separatorContainer"><img src="/images/vertical_shadow.png" alt="" class="columnDivider" id="separator"/></div>-->

<div id="SpecialtyBottomRight">
<img src="/images/short_wave_transparent.png" width="460" height="23" id="servicesHeaderImage" alt=""/>
<umbraco:Item field="SpecialtyServiceExperts" runat="server"></umbraco:Item>
</div>
</div>
<p />

<script language="javascript" type="text/javascript">
myBorder.render('SpecialtyTop');
myBorder.render('SpecialtyNews');
myBorder.render('SpecialtyPublications');
myBorder.render('SpecialtyBottomRight');
</script>
</asp:content>

I'm not sure why the table is being used (I didn't write it that way and hope to be able to remove it in the future).

Thank you for your help!!!

[abduraooft]

Here is the code for the page: Sorry, we can't parse your server side code to generate the corresponding html. You need to post the parsed html output taken from browser's "view source" option. Or a link to your page would be much better!


I'm not sure why the table is being used (I didn't write it that way and hope to be able to remove it in the future). It's necessary to have a clean and semantic markup to get a compatible display in all browsers. Why should you postpone to have it in future? Using tables for anything other than displaying tabular data is very bad. Read http://www.hotdesign.com/seybold/