Список элементов, отображаемых под другими элементами. IE7 CSS HTML

Question

У меня есть строка меню, в которой используется приведенный ниже код: при нажатии элементов списка заголовков они вызывают функцию showHide, чтобы изменить класс внутреннего списка на класс с блоком отображения вместо ни одного.

На ie6 и ff все работает нормально, Chrome Opera и т. Д. Но на ie7 внутренний список отображается под другими элементами основного списка. Кажется, все, что я пытаюсь сломать, в других браузерах.

Любая помощь высоко ценится.

<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

Я бы справился с библиотекой javascript, такой как jQuery , так как она позаботится обо всех кросс-браузерных проблемах для вас и имеет такие полезные методы, как toggle () для отображения и скрытия элементов. .

Код jQuery будет выглядеть примерно так:

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

Также, если вы хотите скрыть ранее показанные подменю, вы должны использовать это:

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