JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<div id="LogoNav">
<div id="nav">
<ul id="subnav"><li class="home"><a href="#">Back</a></li><li class="breadcrumb"><a href="#">About Us:</a></li> <li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a></li>
<li><a href="#">Menu Item 5</a></li>
<li><a href="#">Menu Item 6</a></li>
<li><a href="#">Menu Item 7</a></li></ul>
<ul class="back2Main">
<li><a href="/default.asp">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a></li>
<li><a href="#">Menu Item 5</a></li>
<li><a href="#">Menu Item 6</a></li>
<li><a href="#">Menu Item 7</a></li>
<li><a href="#">Menu Item 8</a></li>
</ul> </div>
</div>
</div>
CSS
body {font-family:Calibri, Verdana, Geneva, sans-serif; text-align:center;}
#container { width: 930px; margin:0 auto; position:relative; padding: 20px 30px; overflow: auto;}
#LogoNav { position: relative; float:left; width:166px;}
#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;}
JavaScript
$(document).ready(function(){
$(".home a").click(function(event){
event.preventDefault();
$('#nav ul').each(function() {
$(this).animate({"right": "-=166px"}, "fast");
});
});
});