Question

I have a jquery slidedown menu in unordered list – although it worked on Firefox, I only realised there was a problem when someone told me they were having problem displaying it properly in IE. The menu jack-knifes where the jquery is inserted in the list 🙁

Here’s the code I’m using:

<ul>
    <li><a href="Item.html">First</a></li>
    <li><a href="">Second</a></li>
    <li><a href="">Third</a></li>
    <li id="flip_1"><span>Family</span></li>
        <div id="panel_1">
            <li><a href="">Child 1</a></li>
            <li><a href="">Child 2</a></li>
            <li><a href="">Child 3</a></li>
        </div>

    <li><a href="history">History</a></li>
 </ul>

Not only is this menu breaking, the jquery item jerks back into place when clicked.

Here’s the code for the slide:

$(document).ready(function(){
      $("#flip_1").click(function(){
      $("#panel_1").slideToggle("slow");
    }); 
 });

I appreciate your help.

Answer 1

Your html is invalid. So you will get unexpected results. You have a list item that contains a div and then more list items. List items must go inside ol or ul tags. Fix that first and let us know what happens.

 <div id="panel_1">
        <!-- These are supposed to be inside a ul or ol tag -->
        <li><a href="">Child 1</a></li>
        <li><a href="">Child 2</a></li>
        <li><a href="">Child 3</a></li>
 </div>