dropdown menu not working in IE8 css - html

Question

I have a drop down ul menu that is working in every browser except IE8. I have tried messing with the Z-index but haven't had much luck. When the user hovers over the first element, there is it displays the 2nd list as a drop down but then once the user tries to navigate to it, it disappears. Is there something else that I may be missing? Please help.
Here is the generated HTML:
<div id="topNav" class="topNavMenu">
<ul>
<li>Home</li>
<li><a rel="submenu1">Account Information</a></li>
<li><a rel="submenu2">Financial</a></li>
<li><a rel="submenu3">Pricing</a></li>
<li><a rel="submenu4">Operations</a></li>
<li><a rel="submenu5">Support</a></li>
<li><a rel="submenu6">Document Management</a></li>
<li><a rel="submenu7">Administration</a></li>
</ul>
<ul id="submenu1" class="ddsubmenustyle">
<li>Bill To/Ship To Search</li>
<li>Customer Account Information</li>
</ul>
<ul id="submenu2" class="ddsubmenustyle">
<li>Statement Search</li>
</ul>
<ul id="submenu3" class="ddsubmenustyle">
<li>Price Notification Summary</li>
</ul>
<ul id="submenu4" class="ddsubmenustyle">
<li>Online Environmental Compliance</li>
</ul>
<ul id="submenu5" class="ddsubmenustyle">
<li>Manage Profile</li>
<li>Administrative Interfaces</li>
</ul>
<ul id="submenu6" class="ddsubmenustyle">
<li>HES</li>
<li>Marketing Services</li>
<li>Sunoco University Classes</li>
<li>Credit Card Program Information</li>
</ul>
<ul id="submenu7" class="ddsubmenustyle">
<li>Create a New User</li>
<li>User Administration</li>
<li>Create a New Role</li>
<li>Maintain Menu Items</li>
<li>Refresh Menu</li>
</ul>
</div>
and the CSS:
/* Top navigation menu
topNavMenu = the class used on the menu div.
ddsubmenustyle = dropdown div css.
-----------------------------------------------------------*/
.topNavMenu ul
{
margin: 0;
padding: 0;
font: bold 12px Verdana;
list-style-type: none;
background: #C3C9D9; /* #153371 */
overflow: hidden;
width: 100%;
background-image:url(../images/menu_bg.png);
height:35px;
float:left;
}
.topNavMenu li
{
display: inline;
margin: 0;
z-index: 100;
}
.topNavMenu li a
{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 0px 10px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: black;
background: #6c94b0; /* #153371 */
background-image:url(../images/menu_bg.png);
height:35px;
line-height:35px;
font-family:Verdana, Arial, Helvetica, sans-serif;
/*font-size:10px;*/
}
.topNavMenu li a:visited
{
color: black;
}
.topNavMenu li a:hover
{
background:#4D77A7; /*background of tabs for hover state */
color:White;
text-decoration:bold;
}
.topNavMenu a.selected
{
background: #4D77A7; /*background of tab with "selected" class assigned to its LI */
color:White;
}
.ddsubmenustyle, .ddsubmenustyle div
{ /*topmost and sub DIVs, respectively*/
font: normal 12px Verdana;
margin: 0;
font-weight:bold;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border-bottom-width: 0;
visibility: hidden;
z-index: 300;
}
.ddsubmenustyle ul
{
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
z-index: 300;
}
.ddsubmenustyle li a
{
display: block;
width: 170px; /*width of menu (not including side paddings)*/
color: white;
background-color: #aec6f6;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid white;
background-color:#4D77A7;
line-height:24px;
z-index: 300;
}
.ddsubmenustyle li ul li a, .ddsubmenustyle li ul li:first-child a
{
display: block;
width: 170px; /*width of menu (not including side paddings)*/
color: white;
background-color: #aec6f6;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid white;
background-color:#4D77A7;
line-height:24px;
background-image:none;
-moz-border-bottom-radius: none;
-webkit-border-bottom-radius: none;
-khtml-border-bottom-radius: none;
border-bottom-radius: none;
}
.ddsubmenustyle li:first-child a
{
display: block;
width: 170px; /*width of menu (not including side paddings)*/
color: white;
background-image:url(../images/arrow_first-child.png);
background-repeat:no-repeat;
background-position:top left;
background-color: #4D77A7;
text-decoration: none;
padding: 16px 5px 4px 5px;
border-bottom: 1px solid white;
background-color:#4D77A7;
}
.ddsubmenustyle li ul li:last-child a
{
-moz-border-bottom-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-khtml-border-bottom-right-radius: 0px;
border-bottom-right-radius: 0px;
-moz-border-bottom-left-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-khtml-border-bottom-left-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom: none;
}
.ddsubmenustyle li ul li a:hover
{
background-color:#4D77A7;
color: 40638A;
line-height:24px;
}
.ddsubmenustyle li:last-child a
{
-moz-border-bottom-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-khtml-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-bottom-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-khtml-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
}
* html .ddsubmenustyle li
{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}
.ddsubmenustyle li a:hover
{
background-color:#38587C;
color: white;
line-height:24px;
}
/* Neutral CSS */
.downarrowpointer
{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}
.rightarrowpointer
{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}
.ddiframeshim
{
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}

Answer 1

I tried to view this in Chrome but couldn't get it to work properly. Why are the sub-menus separate ul's? Perhaps you could try a nested list, like this:
<nav>
<ul class="top-nav">
<li>
Item 1
<ul class="sub-nav">
<li>Item 1a</li>
<li>Item 1b</li>
<li>Item 1c</li>
</ul>
</li>
<li>
Item 2
<ul class="sub-nav">
<li>Item 2a</li>
<li>Item 2b</li>
<li>Item 2c</li>
</ul>
</li>
</ul>
</nav>
And here's some CSS to make it work:
* {
margin: 0;
padding: 0;
list-style: none;
color: inherit;
text-decoration: none;
}
body {
font-family: sans-serif;
}
nav {
margin: 0 auto;
}
.sub-nav {
display: none;
}
.sub-nav li {
background: #333;
color: #fff;
padding: 4px 2px;
border-bottom: 1px solid #e0e0e0;
}
.top-nav {
overflow: hidden;
}
.top-nav > li {
float: left;
width: 100px;
padding: 4px 0;
background: #e0e0e0;
}
.top-nav > li:hover ul {
display: block;
}
Just tested in Chrome and IE, and worked fine.