List items rendered under other elements. IE7 CSS HTML

Question

I have a menu bar which uses the below code, when the title list items are clicked they call the showHide function to change the class of the inside list to one with display block instead of none.

On ie6 and ff it works fine, chrome opera etc etc. But on ie7 the inside list is render under the other elements in the main list. Everything i try seems to break on of the other browsers.

Any help much appreciated.

<ul id="FOOMENU" style="list-style-type: none; padding-left: 10px; text-decoration: none;">   
<li class="navItemsHeader"><b>View by..</b></li>

<li>
<b><a style="text-decoration:none;" href="javascript:void(0);" onclick="showHide('foobarMenu');">foobar..</a></b>
</li>

<li id="foobarMenu" class="hideMenu">
                                <ul style="list-style-type:none; padding-left:10px; text-decoration:none; ">
                                    <li>DYNAMIC LIST OF LINKS HERE.</li>

                                </ul>
</li>

Answer 1

I would get to grips with a javascript library like jQuery, as it will take care of all the cross-browser issues for you, and has such useful methods as toggle() to show and hide elements.

The jQuery code would be something like

$(".hideMenu").click(function() {
    $(this+"> ul").toggle();
});

Also, if you wanted to hide previously shown submenus you would use this:

$(".hideMenu").click(function() {
    $(".hideMenu > ul").hide();
    $(this).children("ul").show();
});