CSS CSS 메뉴 하위 메뉴 문제

Question

안녕하세요, 하위 메뉴가 있고 그 위에 (적어도 최상위 수준 항목) 웹 사이트에 대한 가로형 메뉴 모음을 만들려고합니다.

홈 페이지에서 최상위 항목을 볼 때 최상위 항목 위로 마우스를 가져 가면 항목의 색상이 변경되고 하위 메뉴가 표시되도록하고 하위 메뉴 위로 마우스를 가져 가면 색상이 바뀌어야합니다. 이 모든 것이 제대로 작동하는 것 같습니다.

내가 고민하고있는 것은 일단 상위 항목을 클릭하면 그 페이지로 이동합니다. 다른 최상위 항목 중 하나를 가리킬 때까지 해당 항목의 하위 메뉴가 표시되어야합니다 (내가 가지고있는 공간에서의 겹침). 내가 이것을 달성하기 위해 생각할 수있는 유일한 방법은 jQuery를 사용하여 다른 최상위 항목 위로 마우스를 가져갈 때 활성 하위 메뉴를 숨기는 것입니다. 그러나이 문제는 하위 메뉴가 숨겨져있는 "활성"선택 위로 마우스를 가져 가도 문제가됩니다.

저는 CSS로 끝내기 위해 노력했지만 지금은 불가능하다고 생각하기 시작했습니다. 그래서 지금 jQuery 옵션을 살펴 보았습니다.하지만 지금도 여기에 붙어 있습니다. ! 나는 아마도 지나치게 복잡한 일들을했을 것입니다.

나는 약에있어 무엇을 설명하려고 도움이되는 바이올린했습니다 :이 첫 번째 최상위 항목을 선택 인 것처럼

http://jsfiddle.net/vLZv7/

을 당신은 상위 1 "에 지금 .html "

모든 도움이나 지침은 정말 감사하겠습니다.

내 코드 :

<div class='menu'> 
<ul> 
    <li class='active'><a href="#">Parent 1</a> 
    <ul> 
     <li><a href="#">Sub 1-1</a></li> 
     <li><a href="#">Sub 1-2</a></li> 
     <li><a href="#">Sub 1-3</a></li> 
    </ul> 
    </li> 
    <li><a href="what-we-do.php">Parent 2</a> 
    <ul> 
     <li><a href="#">Sub 2-1</a></li> 
     <li><a href="#">Sub 2-2</a></li> 
     <li><a href="#">Sub 2-3</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Parent 3</a> 
    <ul> 
     <li><a href="#">Sub 3-1</a></li> 
     <li><a href="#">Sub 3-1</a></li> 
    </ul> 
    </li> 
</ul> 
</div> 

CSS :

.menu ul{ 
    text-align:justify; 
    width:300px; 
    min-width:500px; 
    margin-top:60px; 
} 
.menu ul:after{ 
    content:''; 
    display:inline-block; 
    width:100%; 
} 
.menu ul li{ 
    display:inline-block; 
    list-style:none; 
    white-space:nowrap; 
    margin:0; 
    padding:0; 
} 
.menu ul li a{ 
    text-decoration:none; 
    color:#000; 
} 
.menu ul li:hover a{ 
    color:#CCCC00; 
    border-bottom:1px solid #CCCC00; 
} 
.menu ul li ul{ 
    display:none; 
} 

.menu ul li:hover ul{ 
    position:absolute; 
    display:block; 
    text-align:justify; 
    width:500px; 
    min-width:500px; 
    margin:0; 
    padding-top:20px; 
} 
.menu ul li:hover ul li a{ 
    color:#000; 
    border:none; 
    margin-right:25px; 
} 
.menu ul li:hover ul li:hover a{ 
    color:#CCCC00; 
} 
.menu li.active a{ 
    color:#CCCC00; 
    border-bottom:1px solid #CCCC00; 
} 
.menu li.active ul{ 
    position:absolute; 
    display:block; 
    text-align:justify; 
    width:500px; 
    min-width:500px; 
    margin:0; 
    padding-top:20px; 
} 
.menu li.active ul li a{ 
    color:#000; 
    margin-right:25px; 
    border-bottom:none; 
} 
.menu li.active ul li:hover a{ 
    color:#CCCC00; 
    margin-right:25px; 
} 
.hide{ 
    display:none; 
} 

간단한 jQuery를 :

$('.menu').hover(
function(){ $('.menu li.active ul li a').addClass('hide') }, 
function(){ $('.menu li.active ul li a').removeClass('hide') } 
) 

Answer 1

없음 간단 이상의

$('.menu li:not(.active)').hover(
    function(){ $('.menu li.active ul li a').addClass('hide') }, 
    function(){ $('.menu li.active ul li a').removeClass('hide') } 
) 

Answer 2

이 같은 li 요소와 일치하는 이벤트 발사 선택기 변경할 수 있습니다

$('.menu li').hover(...... 

그리고 unbind()을 .active 항목에 대한 호버 조치 : "__

$('.menu li.active').unbind('mouseenter mouseleave'); 

http://jsfiddle.net/vLZv7/7/