To simplize my question, this is what I basically want to do:

Display a menu bar which contains: ABC | XYZ | HELP

When the HELP menu gets the focus, it will display two items, like:

HELP
Item One
Item Two

The is the codes I put into the JSP:

<ul id="topMenu_ul" style="border-top:none; border-bottom:none;">
<li id="topMenu_home" >ABC</li>
<li id="topMenu_home" >|</li>
<li id="topMenu_home" >XYZ</li>
<li id="topMenu_home" >|</li>
<li id="topMenu" >
Help
<iframe id="topMenu_iframe"></iframe>
<ul id="topMenu_ul" style="width:12em">
<li id="topMenu_item1"> <a href="#">Item One Here</a> </li>
<li id="topMenu_item2"><a href="#">Item Two Here</a></li>
</ul>
</li>
</ul>


And This is the CSS which made it happen:

/* all lists */
#topMenu_ul, #topMenu_ul ul {
float:left;
padding: 0;
margin:0 0 0 0em;
list-style: none;
Then, what is my question?
line-height: 1em;
border: solid #394665;
border-width: 1px 0;
font-weight: bold;
z-index: 200;
}

#topMenu_ul iframe{
z-index: 199;
border:0;
padding:0;
display:none;
position:absolute;
}

/* first-level list */
#topMenu_ul a {
display: block;
width: 6.4em;
text-decoration: none;
color: #FFFFFF;
padding: 1px 3px 5px 5px;
Then, what is my question?
height: 1em;
}

/* faded blue */
#topMenu_ul a:hover{
background:#5C75AA;
}

/* all list items */
#topMenu_ul li {
float: left;
padding:0;
margin:0;
}

#topMenu_ul li ul { /* second-level lists */
position: absolute;
width: 8.3em;
left: -1999px; /* more accessible than display: none */
background: #eee;
Then, what is my question?
height: auto;
margin: 0;
border-width: 1px;
Then, what is my question?
font-weight: normal;
font-size: 12px;
}

#topMenu_ul li ul li a{
color: #394664;
width: 100%;
padding:3px 6px;
white-space:nowrap;
}

#topMenu_ul li:hover ul, #topMenu_ul li li:hover ul, #topMenu_ul li.navhover ul, #topMenu_ul li li.navhover ul{ /* lists nested under hovered list items */
left: auto;
}

The above codes were tested on Firefox and it worked.

However, when I tested it on Internet Explorer 9, the list under the HELP menu failed to show up.

How can I make the items under the HELP menu show up on IE9?


Thanks