메뉴 항목 호버 효과 및 하위 목록 호버

Question

메뉴 항목 호버 효과에 문제가 있습니다. http://www.upload.ee/image/3408064/abi.png

그것은 워드 프레스 사이트이며,이 메뉴가 생성되고, 워드 프레스 메뉴에 의해 관리됩니다 :

처음에는

, 나는 여기에 네 개의 이미지를 가지고있다.

첫 번째 이미지에서는 왼쪽에 메뉴가 표시됩니다. 회색 대문자 항목은 주 항목이며 클릭하면 파란색 텍스트와 흰색 배경의 하위 목록이 나타납니다.

유혹 하위 목록의 항목은

여기에 문제가있는 부분을 오는 두 번째 이미지 (다른 하위 목록이 나타납니다)와 같은 역할을합니다. 나타나는 하위 목록으로 커서를 이동하면 세 번째 이미지와 마찬가지로 상위 항목 마주침 효과가 사라집니다.

내가 하위 목록으로 이동할 때 상위 호버 효과를 유지하고 싶습니다. 마지막 이미지에서 처럼 ... 여기

이 하위 목록의 apperaing 내 현재 스크립트 유혹하는 동안 부모 하위 목록 항목 :

jQuery(function() { 
    jQuery('.left-sidebar li').click(function() { 
     jQuery(this).children('ul').slideDown(300); 
    } 
}); 

: 여기

jQuery(function() { 
    jQuery('.left-sidebar li li').hover(function() { 
     jQuery(this).children('ul').slideDown(1); 
    }, function() { 
     jQuery(this).children('ul').fadeOut(1); 
    }); 
}); 

와 먼저 하위 메뉴 성상에 대한 주요 항목을 클릭 액션 스크립트입니다

여기에 jsfiddle : jsfiddle.net/TBRgu 일부 배경 스타일이 누락되었지만 문제가되지 않습니다.

Answer 1

라이브 데모 : http://jsfiddle.net/TBRgu/2/

변경이 : 여기에

.left-sidebar .box li li a:hover 

:

.left-sidebar #menu-kutsemeistrivoistlused > li > ul > li:hover > a 

변경 다음과 같이 폭 : 귀하의 하위 메뉴가 아이처럼

.left-sidebar .box li li li a{ 
    background: none; 
    padding-left: 4px; 
    width: 186px; /* changed from 165px */ 
    border:0; 
}