Note: this has been superseded by the recursive drop down menu script.
The Code:
$(document).ready(function () { // Shawsons' Teeny-Tiny Drop Downs!
$('.drop-down-menu li ul').hide().mouseleave(function () {
$(this).hide();
});
$('.drop-down-menu>li>a').mouseenter(function () {
$('ul', $(this).parent().parent()).hide();
$('ul', $(this).parent()).show();
}).mouseleave(function (o) {
if ($(this).parent().has($(o.relatedTarget)).length < 1) {
$('ul', $(this).parent()).hide();
}
});
});
The Markup:
<ul class="drop-down-menu">
<li>Available Actions : </li>
<li><a href="">Menu 1</a>
<ul>
<li><a href="a.htm">a</a></li>
<li><a href="b.htm">b</a></li>
<li><a href="c.htm">c</a></li>
</ul>
</li>
<li><a href="">Menu 2</a>
<ul>
<li><a href="d.htm">d</a></li>
<li><a href="e.htm">e</a></li>
<li><a href="f.htm">f</a></li>
</ul>
</li>
</ul>
Some CSS:
.drop-down-menu { display:block; }
.drop-down-menu li { float:left; padding: 8px; }
.drop-down-menu li a { padding:8px; }
.drop-down-menu li ul
{
position:absolute;
background-color:#fff;
border: 1px solid #999;
border-radius: 0px 7px 7px 7px; -moz-border-radius:0px 7px 7px 7px; -webkit-border-radius:0px 7px 7px 7px;
padding:5px;
}
.drop-down-menu li ul li { float:none; }
.drop-down-menu li ul li a { color:#000; }
.drop-down-menu li ul li:hover { background-color:#F68833; }
