using jquery, i managed to setup an iphone-style navigation when i need to navigate backwards up a site hierarchy. 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 coded (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/kneidels/Lecnc/ (click on the "back" menu option to see the effect - it only works in the one direction, not going into an inner navigation section).

and here is the relevant CSS:


Code:
#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!