導航菜單隱藏位置

Question

我不知道這裏發生了什麼，也許它太早！

看到這個FIDDLE

當下面的灰色方塊中的鏈接點擊，它最終將滾動從右相對含量向左等等。但是，單擊在導航，交通項目2 & 3時或獎學金，導航菜單似乎向左移動或完全消失！如果有人能夠投下一隻眼睛，並糾正我的愚蠢，那麼會非常感激！

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><a href="#Fees">Fees</a></li> 
       <li><a href="#Transport">Transport</a></li> 
       <li><a href="#Scholarships">Scholarships</a></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

你去那裏現在的工作，但是themenu看起來不一樣，因爲我是在努力。再次更改它。你的代碼非常混亂，並且多次調用相同的ID和類，我打賭你的HTML頁面很混亂，像下面這樣的人說你忘記了正確的位置類型。你的主要應該有位置：絕對。你也錯過了適當的顯示類型，如顯示：塊

/* --- 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; 
}