我使用li选择器掉落，每个li：hover将包围所有底层ul / lis

Question

我有一个简单的嵌套ul / li列表，我想在删除时突出显示底层元素。

问题是，我使用li选择器掉落，每个li：hover将包围所有底层ul / lis。 Jquery-ui的droppable对我有一个悬停类选项，但是我没有看到如何将它应用到我的ul / lis的技巧。

HTML：

ul
- li
  a 
  ul
  - li
    a
  - li
    a
    ul
    - (...)

的javascript：

$(function () {
    $(".draggable ul > li").draggable();
    $(".droppable > li").droppable({
        greedy: true,
        hoverClass: "drop-hover-highlight",
        drop: function (event, ui) {
            // find the related element to append the dragged item
            $(this).find('> .list-inline').append('<li class="draggable">' + ui.draggable.html() + '</li>');
            ui.draggable.remove();
        }
    });
});

CSS

.drop-hover-highlight { background: #EEE }

我已经考虑过儿童/兄弟姐妹选择器，但我无法将其应用于＆＃39; hoverClass＆＃39;？

工作演示：http://jsfiddle.net/wiesson/qthm61ou/