jQuery toggle pushing other elements around... bullies!!

Question

Ok, so in the left_col of my page, i have a list UL LI that incorporates a jQuery toggle to open a small box, which is "LoginBox".

<ul>
    <li class="members"><a href="/members/signon.asp?userType=member">Members</a></li>
    <li class="employers"><a href="/employers/signon.asp?userType=employer">Employers</a></li>
    <li class="providers"><a href="#LoginBox" class="clicker">Providers</a></li>
        <div class="loginbox" id="LoginBox">
            <p>Medical</p>
            <p>Dental</p>
        </div>
    <li class="brokers"><a href="/brokers/signon.asp?userType=broker">Brokers</a></li>
</ul>

when the jQuery is invoked, it pushes the elements below it down. As expected. What i dont get is that i have an H3 tag below this UL LI which has a background image. The text portion of the H3 gets pushed down, but the background image seems to stay put, and the UL LI that gets pushed down just covers up the background image of the H3.

why would the text move, but not the background image itself?

here is the H3 style:

    .sectionmenu h3{
    background: url(/_images/h3-triangle.gif) left center no-repeat;
    color: #000;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 0px 4px 10px;
    margin: 0;
    border-bottom:1px dotted #aeaeae;;
}

and the login box style:

    .loginbox{
    display:none;
    width:100px; 
    height:50px; 
    margin:0 0 0 77px;
}

Answer 1

You cannot have a div in a ul. try changing it to an li

<li class="loginbox" id="LoginBox">
 <p>Medical</p>
 <p>Dental</p>
</li>

The only legal child of ul is li. li can have block elements such as div. I think that once you validate your html, everything will work as expected.