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><a href="/Main">Home</a></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><a href="/Display/Page/Index/19">Bill To/Ship To Search</a></li>
    <li><a href="/Display/Page/Index/33">Customer Account Information</a></li>
</ul>
<ul id="submenu2" class="ddsubmenustyle">
    <li><a href="/Display/Page/Index/29">Statement Search</a></li>
</ul>
<ul id="submenu3" class="ddsubmenustyle">
    <li><a href="/Display/Page/Index/30">Price Notification Summary</a></li>
</ul>
<ul id="submenu4" class="ddsubmenustyle">
    <li><a href="/Display/Page/Index/31">Online Environmental Compliance</a></li>
</ul>
<ul id="submenu5" class="ddsubmenustyle">
    <li><a href="/Display/Page/Index/32">Manage Profile</a></li>
    <li><a href="/Display/Page/Index/15">Administrative Interfaces</a></li>
</ul>
<ul id="submenu6" class="ddsubmenustyle">
    <li><a href="/Display/Page/Index/45">HES</a></li>
    <li><a href="/Display/Page/Index/52">Marketing Services</a></li>
    <li><a href="/Display/Page/Index/54">Sunoco University Classes</a></li>
    <li><a href="/Display/Page/Index/43">Credit Card Program Information</a></li>
</ul>
<ul id="submenu7" class="ddsubmenustyle">
    <li><a href="/Administration/UserAdmin/CreateUser">Create a New User</a></li>
    <li><a href="/Administration/UserAdmin">User Administration</a></li>
    <li><a href="/Administration/UserAdmin/CreateRole">Create a New Role</a></li>
    <li><a href="/Administration/MenuItem">Maintain Menu Items</a></li>
    <li><a href="/Administration/MenuItem/RefreshMenu">Refresh Menu</a></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>
      <a href="#">Item 1</a>
      <ul class="sub-nav">
        <li><a href="#">Item 1a</a></li>
        <li><a href="#">Item 1b</a></li>
        <li><a href="#">Item 1c</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Item 2</a>
      <ul class="sub-nav">
        <li><a href="#">Item 2a</a></li>
        <li><a href="#">Item 2b</a></li>
        <li><a href="#">Item 2c</a></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.