Hi

I have a fixed positioned footer bar at the bottom of my site. This will always remain at the bottom of a users browser.

I have a DIV (#homemenu) which contains content but by default this DIV needs to be hidden offscreen slightly below and behind the footer sowhen a user hovers overs the bit of the DIV sticking out (#homefeature), the DIV slides up using jquery. When they mouseout from the panel, it slides back into position behind the footer bar. Well , thats the plan anyway!

Here is my HTML:

HTML Code:
<div class="footer">
        <div id="homemenu">
            <ul id="homefeature">
                <li class="features">
                    <a href="" class="opaque">Feature</a>
                    <div class="featurecontent">
                        <h1>Title</h1>
                        <p>content...</p>
                    </div>
                    <img src="/repository/file.jpg" />
                </li>
            </ul>
        </div>    
</div>
I have everything working except that the #homemenu DIV is appearing ONTOP of the footer bar. Now I have read that any sibling of a parent cannot be positioned below its parent, it can only be positioned below content of its parent, so this is my problem.

Can anyone offer advice as to how I can keep my #footer with a fixed position but get the #homemenu to appear below it without creating a verticle scrollbar in the browser?

Many Thanks