拖放右键菜单

我正在寻找一个拖放右键菜单，而不是下拉菜单。基于名单的名单，前HTML拖放右键菜单

<ul> 
<li> item1 
<li> fold1 <ul><li> fold1it1 <li> fold1it2 </ul> 
<li> item2 
<li> fold2 <ul><li> fold2it1 <li> fold2it2 </ul> 
</ul>

当你mousover fold1，它会扩展到右右（右下降）

item1 
fold1 fold1it1 fold1it2 fold2it3 
item2 
fold2

我在寻找真正简单易懂的CSS例子，或某种jQuery插件谢谢

来源

2009-11-12 undef

你可能想看看Filament Group的fgmenu。适用于jQuery UI主题，特别是弹出式菜单。它也似乎在jQuery UI菜单上的future work将基于这项工作。

来源

2009-11-12 22:46:43 tvanfosson

谢谢，但这并不是我所期待的，它滴下来（右再放下，仍下降，我只是想对）。 – undef 2009-11-12 23:01:03

我想我想通了，我还是会采取任何建议

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html><head> 
<style type="text/css"> 
.dropRight { 
    border: 1px solid red; 
    display:block; 
} 

.dropRight ul, .dropRight li { 
    margin:0 0 0 0; 
    padding:0 0 0 0; 
} 

.dropRight ul li:hover , .dropRight ul li a:hover { 
    background: #dddddd; 
} 
.dropRight ul { 
    list-style-type: none; 
    display: inline-block; 
} 

/* sub lists hidden by default */ 
.dropRight ul ul { 
    visibility: hidden; 
    display: none; 
} 

/* show the sub lists (children) */ 
.dropRight ul li:hover >ul { 
    visibility: visible; 
    background:yellow; 
    display: inline-block; 
} 

/* sub list items drop right, not down */ 
.dropRight ul ul li { 
    position: relative; 
    float: left; 
} 

</style> 
</head><body> 
<div class="dropRight"> 
<ul> 
<li> item1 
<li> <a href="#">fold1</a> 
    <ul> 
    <li> fold1it1 
    <li> fold1it2 
    <li> <a href="#">fold1it3</a> 
    </ul> 
<li> item2 
<li> <a href="#">fold2</a> 
    <ul> 
    <li> fold2it1 
    <li> fold2it2 
    <li> <span title="The Impossible Fold">fold2it3fold1</span> 
    <ul> 
    <li> fold2it3fold1it1 
    <li> fold2it3fold1it2 
    </ul> 
    <li> <a href="#" title="messed up">fold2it3fold2</span> 
    <ul> 
    <li> fold2it3fold2it1 
    <li> fold2it3fold2it2 
    </ul> 
    </ul> 
</ul> 
</div> 
</body></html>

来源

2009-11-13 01:32:02 undef

拖放右键菜单

回答

相关问题