divs being overlayed (IE) - iPhone style navigation

[snooper]

using jquery, i managed to setup an iphone-style navigation when i need to navigate backwards in a site. ie - i am in an inner page, and need to get back to the upper level - the whole menu scrolls left. works seamlessly in FF.

the problem is that; 1) i have been forced to make the one UL item of a menu - have a negative top margin to match a set height as well, because i havent managed to get it floated.and the negative top margin needs to be hard c'oded (see the "back2Main" class). i would like to find a way to do it better.

2) there are reports that on IE8 (though i have only seen it in IE7 or IE6) - that the 2 menus (current and upper) are overlayed over each other instead of side by side.

here is a demo of the setup in jsfiddle: http://jsfiddle.net/qBujZ/ (click on the "home" menu to see the effect - it only works in the one direction, not going back to an inner navigation).

and here is the relevant CSS:


#LogoNav h1 a {
position: relative;
background:url(../images/ui/logo.jpg) top left no-repeat;
text-align: left;
text-indent:-99999px;
display: block;
height:195px;
margin-bottom: 20px;
}
#nav {
width: 166px;
overflow:hidden;
}
#nav ul {
text-align: left;
border-top: 1px solid #CFD8E0;
width: 166px;
height:700px;
float:right;
position:relative;
}
#nav ul#subnav {
margin-right:0;
}
#nav ul.back2Main {
margin: -700px 166px 0 0
}
#nav ul li {
border-bottom: 1px solid #CFD8E0;
}
#nav ul li a {
background:url(../images/ui/navArrow.gif) no-repeat;
background-position: -185px 12px;
font-family: FolksRegular;
font-size: 115%;
padding: 10px 0 6px 20px;
display: block;
color: #0192C9;
text-decoration: none;
letter-spacing: 0.5px;
}
#nav ul li.home a {
background:url(../images/ui/navArrowBack.gif) no-repeat;
background-position: 0px 12px;
color: #003151;
}
#nav ul li.apply a {
background-position: 0px 12px;
color: #003151;
}
#nav ul li.breadcrumb a {
background:#EDF0F3;
padding-left: 4px;
color:#003151;
}
#nav ul li a:hover {
color:#003151;
background-position: 0px 12px;
}
#nav ul li.home a:hover {
color:#0192C9;
background-position: -185px 12px;
}



many thanks in advance for any help!