Navigation menu hides position - css

Question

I can't figure out what is going on here, perhaps it's just too early!!
See this FIDDLE
When clicking on the links below the grey box, it will eventually scroll the relative content from right to left etc. However, when clicking items 2 & 3 in the nav, transport or scholarships, the navigation menu seems to move to the left or disappears completely! If someone could cast an eye, and correct my stupidity it'd be gratefully appreciated!
HTML:
<div class="finance-galleryWrapper">
<div class="galleryView">
<div class="swapView">
<li class="gallery-item" id="Fees"></li>
<li class="gallery-item" id="Transport"></li>
<li class="gallery-item" id="Scholarships"></li>
</div>
<nav class="toggle-nav">
<ul>
<li>Fees</li>
<li>Transport</li>
<li>Scholarships</li>
</ul>
</nav>
</div>
</div>
CSS:
/* --- Galleries --- */
.finance-galleryWrapper {
width: 860px;
height: 559px;
margin: 0 40px;
overflow: scroll;
}
.galleryView {
width: 860px;
overflow: hidden;
display: block;
}
.swapView {
width: 2580px;
height: 427px;
background: #666;
overflow: scroll;
}
li.gallery-item {
width: 860px;
height: 427px;
display: inline;
float: left;
}
/* toggle-nav */
/* toggle-nav */
.toggle-nav {
width:720px;
margin:50px auto 30px;
text-align:center;
position:relative;
z-index:1001;
}
.toggle-nav ul {
margin:0 auto;
}
.toggle-nav li, .toggle-nav li a {
display:-moz-table-cell;
display:inline-block;
*display:inline;
*zoom:1;
}
.toggle-nav li {
width:168px;
}
.toggle-nav li a {
width:171px;
margin:0 auto;
padding:6px 0 7px;
border:1px solid #cfcfcf;
font-family:Open Sans;
font-size:16px;
color:#666;
text-align:center;
text-decoration:none;
background-color:#fff;
}
.toggle-nav li a:hover {
color:#08c;
}
.toggle-nav li a:first-child {
border-left:1px solid #cfcfcf;
}
.toggle-nav li:first-child a {
border-radius:6px 0 0 6px;
box-shadow:none;
}
.toggle-nav li:last-child a {
border-radius:0 6px 6px 0;
}
.toggle-nav li a.active {
position:relative;
cursor:default;
text-decoration:none;
border:1px solid #2284d1;
color:#fff;
background-color:#59b1f6;
}

Answer 1

There you go it works now, however themenu looks different as I was working on it. Change it back again. Your code was very messy and was calling the same ids and classes so many times , i bet your html page was confused as hell and ya like the guy below said that you forgot to put proper position types. Your main one should have had position:absolute. You also missed out on proper display types like display:block
/* --- Galleries --- */
.finance-galleryWrapper {
width: 860px;
height: 559px;
margin: 0 40px;
overflow: scroll;
}
.galleryView {
width: 860px;
overflow: hidden;
display: block;
}
.swapView {
width: 2580px;
height: 427px;
background: #666;
overflow: scroll;
}
li.gallery-item {
width: 860px;
height: 427px;
display: inline;
float: left;
}
/* toggle-nav */
/* toggle-nav */
.toggle-nav {
width:720px;
margin:50px auto 30px;
text-align:center;
position:relative;
z-index:999;
display:block;
position:absolute;
}
.toggle-nav ul {
margin:auto;
display:block;
position:relative;
padding:0px;
}
.toggle-nav li {
display:inline-block;
position:relative;
margin:0px auto;
padding:0px;
}
.toggle-nav a {
width:171px;
margin:0 auto;
padding:6px 0 7px;
border:1px solid #cfcfcf;
font-family:Open Sans;
font-size:16px;
color:#666;
text-align:center;
text-decoration:none;
background-color:#fff;
}
.toggle-nav li a:hover {
color:#08c;
}
.toggle-nav li a:first-child {
border-left:1px solid #cfcfcf;
}
.toggle-nav li:first-child a {
border-radius:6px 0 0 6px;
box-shadow:none;
}
.toggle-nav li:last-child a {
border-radius:0 6px 6px 0;
}
.toggle-nav li a.active {
position:relative;
text-decoration:none;
border:1px solid #2284d1;
color:#fff;
background-color:#59b1f6;
}