Показать/скрыть сценарий не работает

Question

Я не знаю, что случилось с моим скриптом. Почему. Исключитесь, если я его вишу? Я хочу, чтобы он был виден, если он.

<ul class="drop"> 
    <li class="thumb"> 
     Arival 
     <ul class="inside"> 
      <li>První</li> 
     </ul> 
    </li> 
</ul> 

Некоторые JQuery здесь:

$("li.thumb").hover(
    function() { $(this).children().show(); }, 
    function() { $(this).children().hide(); } 
); 

Работа на http://jsfiddle.net/0s7gd6g3/

Answer 1

вложенное меню исчезает, потому что существует разрыв между li.thumb и ul.inside элементом. Когда мышь над этим подменю области скрывается, конечно, потому что .thumb больше не зависает и .inside позиционируется абсолютно.

Чтобы исправить это, вы можете уменьшить top положение подменю и вместо того, чтобы переместить его вертикально с набивка верхом значение:

.inside { 
    border: 1px white solid; 
    display: none; 
    position: absolute; 
    width: 190px; 
    top: 37px; 
    left: -2px; 
    z-index: 10; 
} 

Демо:http://jsfiddle.net/0s7gd6g3/8/

Кроме того, вы действительно не нужно JavaScript в этом случае, поскольку это просто и эффективнее CSS usecase:

li.thumb:hover .inside { 
    display: block; 
} 

Answer 2

Вы нужно увеличить высоту палец большого пальца так, чтобы при наведении его оставалось, иначе он будет ограничен этим пространством.

Так добавить этот класс:

.thumb { 
    height:100px 
} 

Working Fiddle

Answer 3

$(".drop").hover(
    function() { 
     $(this).find('.inside').show(); 
    }, function() { 
     $(this).find('.inside').hide(); 
    } 
); 

Если вы хотите исправить JQuery, это будет делать это для вас. Просто изменил элемент, который запускает hide/show