JQuery Slideout only works on one side of the page?!

Question

I've been working on a little slideout code and it's just been impossible. It works perfectly sliding out from the right of the page but when I reverse everything and have it slide from the left, not a chance!

The exact issue is that it slides out farther than the width of it's container.

Example at http://demindu.com/sandbox/slideout/. I'd certainly appreciate any tips in the right direction.

Answer 1

Try changing this:

div.sub-menu-content { position:relative; background:url(../img/sub-menu.png) 0 0 no-repeat; width:300px; height:40px; color:#FFF; font-weight:bolder; }

To this:

div.sub-menu-content { position:absolute; right: 0; background:url(../img/sub-menu.png) 0 0 no-repeat; width:300px; height:40px; color:#FFF; font-weight:bolder; }

Then you'll need to look at the code that gives the div "sub-menu-slide rinner" a margin-right of 275px. Make that come out as 250px instead, and you should be back on track.