Проблемы с навигацией jQuery CSS HTML

Question

Я пытаюсь построить этот nav в течение нескольких недель, и что-то всегда идет не так.

То, что я пытаюсь сделать, это первичную навигацию, и когда вы перейдете на основной навигатор, второстепенный навигатор появится под ним и немного вправо. Если вы навредите первичной навигационной или вторичной навигационной навигационной системе, на дисплее вторичной навигации появится: none.

Вы можете увидеть это на 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'); }); 
    }); 

Другие ноты, у меня есть два дублета ivs ниже nav, и почему он не отображает, могу ли я заставить их наложить эти div?

<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 времени.

Благодаря передовой, J

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

что вы должны получить достаточно близко, где вы хотите быть, чтобы закончить.