導航問題jQuery CSS HTML

Question

我一直在試圖建立這個導航數週，現在總是出錯。

我想要做的是有主要導航，當你結束主要導航，次要導航將出現在它的下面和一點點的權利。如果您將鼠標懸停在主要導航欄或輔助導航欄上，輔助導航欄將顯示：無。

您可以在http://willruppelglass.com/index.php

看到這裏，這是我的HTML

<div class="headerNav"> 
<ul> 
<li><a href="#">Home</a></li> 

<li class="primary-nav-item"><a href="#" class='galleryNavToggle'>Gallery</a> 
<ul style="display:none;"> 
<li><a href="#">Categoies</a></li> 
<li><a href="#">Products</a></li> 
</ul> 
</li> 

<li class="primary-nav-item"><a href="#" class='galleryNavInfoToggle'>Info</a> 
<ul style="display:none;"> 
<li><a href="#">F.A.Q.</a></li> 
<li><a href="#">CV</a></li> 
<li><a href="#">Artist Bio</a></li> 
<li><a href="#">Video</a></li> 
<li><a href="#">Contact</a></li> 
</ul> 
</li> 

</ul> 
</div> 

我的CSS

.headerNav{ 
    color:#000; 
    margin:0 auto; 
    width: 1280px; 
    padding-top: 148px; 
} 

.headerNav ul{ 
    list-style-type:none; 
    margin:0; 
    padding:0 0 0 8px; 
} 

.headerNav li{ 
    float:left; 
} 

.headerNav ul a{ 
    font-size:24px; 
    color:#FFF; 
    display:block; 
    padding:0 55px 0 0; 
    text-decoration:none; 
    text-transform:capitalize; 

} 

.headerNav ul a:hover{ 
    color:#a40404; 
    text-decoration:none; 
} 

.headerNav ul ul li { 
    float: left; 
} 

.headerNav ul ul a { 
    font-size: 16px; 
    display:block;   
} 

JQUERY

$(document).ready(function(){ 
     $('.headerNav li.primary-nav-item').hover(
      function() { $('ul', this).css('display', 'block'); }, 
      function() { $('ul', this).css('display', 'none'); }); 
    }); 

其他注意事項，我有兩個d導航下面的ivs，這可能是爲什麼它不顯示，我可以得到它覆蓋這些divs？

<div class="headerDropShadow"></div><!--headerDropShadow--> 

<div class="contentWrapper"> 
<div class="content" id="content"> 
<div class="topContent"></div><!--topContent--> 
</div> 
</div> 

和他們的尊重CSS

.headerDropShadow{ 
    background:url(../images/headerShadow.jpg) repeat-x; 
    width:100%; 
    height:49px; 
} 

.topContent{ 
    background:url(../images/topContent.jpg) repeat-x; 
    width: 992px; 
    height:50px; 
    margin:0 auto; 
    position:relative; 
} 

一直作爲一個loooooong時間問題的任何幫助都將是巨大的，因爲這。

在先進的感謝， Ĵ

Answer 1

.headerNav li ul { 
    position: absolute; 
    z-index: 999; 
} 

我還建議使用.clearfix hack作爲父ul元素。有關clearfix的更多信息，請點擊：http://nicolasgallagher.com/micro-clearfix-hack/。 在jQuery中嘗試使用.toggle（），僅僅因爲它需要更少的代碼^^。

Answer 2

對於初學者：

<style type="text/css"> 
    .headerNav ul { position: relative; z-index: 10000; } 
    .headerNav ul ul li { overflow: hidden; } 
</style> 

不要完全取代你有什麼 - 只需要添加這些屬性，那麼至少，你就可以看到你目前不能。然後你可以開始弄清楚JS發生了什麼事情。

---

更多的編輯

li.primary-nav-item { position: relative; } 
li.primary-nav-item ul { position: absolute; top: 32px; width: 600px; } 

這應該讓你足夠接近，你想完成。