Currently a work in progress. When this message is no longer here, it's probably safe to use these.

• Level One
  • Level Two
    • Level Three
    • Level Three
    • Level Three
  • Level Two
    • Level Three
    • Level Three
    • Level Three
• Level One
  • Level Two
    • Level Three
    • Level Three
    • Level Three
  • Level Two
    • Level Three
    • Level Three
    • Level Three

#dropsavvy, 
#dropsavvy ul
{
	border: solid 1px #ccf;
	border-bottom-width: 0;
	background-color: #f7f7ff;
	color: #000;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 10em;
}
#dropsavvy
{
	font-family: arial, helvetica, sans-serif;
	font-size: 80%;
	margin-bottom: 1em;
}
#dropsavvy li
{
	cursor: pointer;
	border-bottom: solid 1px #ccf;
	padding: 2px 5px;
	margin: 0;
	position: relative;
}
#dropsavvy li ul
{
	position: absolute;
	display: none;
	margin: 0 0 0 65%;
}
#dropsavvy li:hover, 
#dropsavvy li.sfhover
{
	background-color: #ffc;
	z-index: 1;
}
#dropsavvy li:hover > ul
{
	display: list-item;
	margin-top: -0.5em;
}
#dropsavvy li.sfhover ul ul, 
#dropsavvy li.sfhover ul ul ul
{ 
	display: none;
}
#dropsavvy li.sfhover ul, 
#dropsavvy li li.sfhover ul, 
#dropsavvy li li li.sfhover ul
{
	left: 65%;	/* IE/Win 5.0 Only */
	left/**/: 0;
	display: list-item;
	margin-top: -0.5em;
}
#dropsavvy li a
{
	display: block;
	width: auto;
	text-decoration: underline;
}
* html #dropsavvy li a
{
	height: 0.01%;
}

sfHover = function( objID ) 
{
	var sfEls = document.getElementById( objID ).getElementsByTagName( "LI" );
	for (var i=0; i<sfEls.length; i++)
	{
		sfEls[i].onmouseover = function()
		{
			this.className+=(this.className.length>0? " ": "") + "sfhover";
		}
		sfEls[i].onmouseout = function()
		{
			this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
		}
	} 
}
if (window.attachEvent)
{
	window.attachEvent("onload", function () { sfHover( "dropsavvy" ); } );
}