탐색 모음이 찢어지고 있습니다.

Question

스크립트 중 하나에 문제가 있습니다.

가장 큰 문제는 <ul>이 네비게이션 시스템을 찢어 버린 것처럼 보입니다.

빨간 부분은 ul li의 오른쪽에 실제로 나타나야하고 왼쪽 그림처럼 탐색을 떠나는 링크가있는 <ul>의 "하위"입니다.

누군가 나를 도와 줄 수 있습니까?

http://jsfiddle.net/rTDzk/

와 jQuery를 :

function nav() { 
    $('ul li').mouseover(function() { 
     $(this).find('.submenu').show(); 
    }); 
    $('ul li').mouseleave(function() { 
     $('ul li .submenu').hide(); 
    }); 
    $('ul li .submenu').mouseleave(function() { 
     $('ul li .submenu').hide();; 
    }); 
}; 

$(document).ready(function() { 
    nav(); 
}); 

는 HTML - 코드 :

<ul class="noBullet"> 
    <li><a href="#home">home</a> 

    </li> 
    <li><a href="#lager">lager</a> 
     <ul class="submenu"> 
      <li><a href="http://www.mashable.com">Mashable</a> 
      </li> 
      <li><a href="http://www.cnet.com">CNET</a> 
      </li> 
     </ul> 
    </li> 
    <li><a href="#anlaesseN">anlaesseN</a> 

    </li> 
    <li><a href="#images">images</a> 

    </li> 
</ul> 

갱신 :

괜찮습니다. 아래의 jsfiddle이 작동했지만 지금은 다음과 같습니다.

Answer 1

이것은 단지 CSS 문제 일뿐입니다.

여기를 살펴 :

.noBullet > li { position: relative; } 
.submenu { 
    position: absolute; 
    width: 100px; 
    background: #FFFFFF; 
    border:1px solid #000000; 
    z-index: 1000; 
    list-style-type: none; 
    display: none; 
    left:100px; 
    top: 0; 
} 

Updated JSFiddle

당신이 상대하기를 선호하는 이유가하지 않는, 그러나 당신이 위치 할 때 절대적으로보다 쉽고 관리 대상이됩니다.

두 번째 버전 :

.noBullet { position: relative; } 

Updated JSFiddle