简短版: 如何将 Link 1 拖动到此演示中 Link 3 下拉菜单中的一个？http://jsfiddle.net/Gdadu/2/
编辑：提出了以下问题：当拖动一项至另一项上方时，应该放在左侧 / 右侧还是开始新子菜单？为了使列表完全可排序，必须有一种方法将项拖放到不存在的子菜单中，即开始新的下拉菜单。我可以在尚未具有
- 的每个列表项中插入一个空的
ul 以用作放置目标，但还是存在上述问题。
这似乎比我最初想象的要困难得多，所以我为没有更多地投入精力而道歉，因为我没有考虑到其中一些问题。我愿意接受对所述问题的回答，稍后再考虑其他问题。
我有一个基本的下拉导航列表，我希望使用jQuery UI使其完全可排序。li 元素应该能够移动到整个列表的任何位置。我在将顶层列表项拖入子菜单方面遇到了问题，看起来在“拖动模式”下，:hover不会触发下拉列表，因此下拉菜单不会出现。
HTML示例：
<ul class="dropdown">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
</ul>
</li>
</ul>
我的CSS：
.dropdown,
.dropdown li,
.dropdown ul {
list-style:none;
margin:0;
padding:0;
}
.dropdown {
position:relative;
display:block;
z-index:10000;
}
.dropdown ul {
position:absolute;
top:100%;
width:100%;
visibility:hidden;
display:none;
z-index:900;
}
.dropdown ul ul {
top:0;
left:100%;
}
.dropdown li {
position:relative;
float:left;
}
.dropdown li:hover{
z-index:910;
cursor:default;
}
.dropdown ul:hover,
.dropdown li:hover > ul,
.dropdown a:hover + ul,
.dropdown a:focus + ul {
visibility:visible;
display:block;
}
.dropdown a {
text-decoration:none;
display:block;
padding:.5em 2em;
background:#cde;
border:1px solid #ccc;
}
.dropdown ul li {
width:100%;
}
Sortable 初始化：
$('.dropdown').sortable({
items: 'li'
});
演示：http://jsfiddle.net/Gdadu/2/
例如，我想将“Link 1”拖到子菜单中，但无法实现，因为在拖动时子菜单不会出现，就好像被忽略了:hover一样。我不确定问题是出在CSS还是javascript上。我该怎么做呢？
评论区的好主意：
也许你可以在拖动开始时触发全部展开
这可能有效，但我不想展开整个菜单。菜单中可能有很多内容，有许多链接和3级导航，可能会重叠而形成大混乱。