I'm looking for a drop-right menu, not dropdown. Based on list of lists, ex html
<ul>
<li> item1
<li> fold1 <ul><li> fold1it1 <li> fold1it2 </ul>
<li> item2
<li> fold2 <ul><li> fold2it1 <li> fold2it2 </ul>
</ul>
When you mousover fold1, it would expand to the right right (drop right)
item1
fold1 fold1it1 fold1it2 fold2it3
item2
fold2
I'm looking for really simple to understand css example, or some kind of jquery plugin Thanks
You might want to look at fgmenu from the Filament Group. Works with jQuery UI themes, in particular the flyout menus. It also appears that future work on jQuery UI menus will be based on this work.
I think I figured it out, I'll still take any suggestions
<!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>