기본 메뉴에서 커서를 이동할 때 드롭 다운 메뉴가 사라집니다.

Question

상당히 큰 머리글이있는 사이트의 드롭 다운 메뉴에서 작업 중입니다. 머리글 내부에는 기본 메뉴가 포함 된 <ul>이 있으며 각 메뉴 항목에는 드롭 다운이 나타납니다. 내가 겪고있는 문제는 기본 메뉴가 헤더보다 짧아 커서가 주 메뉴 나 드롭 다운 위로 마우스를 가져 가지 않는 곳을 통과해야하는 작은 공간이 있다는 것입니다. 이 짧은 공간에서 드롭 다운 메뉴가 사라집니다. 어떻게 이런 일이 일어나지 않도록 할 수 있습니까? 드롭 다운을 이동할 수 없거나 머리글과 겹칩니다. 나는 또한 효과적인 방법으로 <ul>의 키를 변경할 수 없었습니다.

이 사이트는 개인이지만, 나는 문제 나 데 표시하는 jsfiddle을 만들었습니다 https://jsfiddle.net/x0hvdaqn/

편집 나는 단순함을 위하여 대신 UL의 사업부로 바이올린을 만들었다 ,하지만 때 나는 그것이 작동하기 시작한 ul로 바 꾸었습니다. 내가 만들고있는 실제 메뉴는 같은 방법으로 만들어 지지만 작동하지 않습니다. 왜 이것이 사실입니까? 대신 사업부의 UL과

새로운 바이올린 : https://jsfiddle.net/tgqof8my/

Answer 1

사용이 코드. drop에 마진을 줄이기 바랍니다. 이 옵션을 사용합니다 ...

#wrapper { 
 
    width: 100%; 
 
    height: 75px; 
 
    background-color: green; 
 
    text-align: center; 
 
} 
 
#button { 
 
    height: 40px; 
 
    width: 25%; 
 
    margin: auto; 
 
    background-color: yellow; 
 
    top: 25px; 
 
    position: absolute; 
 
} 
 
#drop { 
 
    display: none; 
 
    background-color: red; 
 
    margin-top: 20px; 
 
} 
 
#button:hover #drop { 
 
    display: block; 
 
}

<div id="wrapper"> 
 
    <div id="button"> 
 
    Primary Menu Item 
 
    <div id="drop"> 
 
    Dropdown 
 
    </div> 
 
    </div> 
 
    Header 
 
</div>