탐색 문제 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> 

MY 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가 표시 될 수 있습니다. 왜 그런 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; 
} 

어떤 도움을 전혀이 같은 좋은 것입니다. 고급의

감사합니다, 우선 들어 J

Answer 1

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

상위 ul 요소에 .clearfix 핵을 사용하는 것이 좋습니다. 여기에 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; } 

당신은 당신이 완료 할 위치를 충분히 닫습니다.