Элемент меню наведения и зависание зависания

Question

У меня проблема с эффектами наведения элементов меню.

В первый, у меня есть четыре изображения здесь: http://www.upload.ee/image/3408064/abi.png

Это WordPress сайт и это меню генерируется и под управлением WordPress меню.

На первом изображении вы можете увидеть меню с левой стороны. Серые элементы верхнего регистра являются основными элементами, и при нажатии на них появляется подсветка с синим текстом и на белом фоне.

зависание элемента подсписка будет действовать как на втором изображении (появляется другая подсписок)

Здесь приходит проблемную часть. Когда я перемещаю курсор в появившийся подсписчик, эффект паттерна родительского элемента исчезает, как на третьем изображении.

Я хочу, чтобы эффект родительского зависания оставался, когда я перехожу к подсписке. Как и в последнем изображении ...

Вот мой текущий сценарий Подсписок apperaing при наведении родительского Подсписок пункт:

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

и вот основной скрипт элементов действий нажмите на первое подменю:

Внешность

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

Вот 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; 
}