зацените, кстати, такой вариант, имхо оптимальный
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
ul, li { margin: 0;
padding: 0; }
li { position: relative;
list-style-type: none;
background: #ddd;
margin: 1px;
width: 100px; }
ul { position: absolute;
left: 100px;
top: -1px; }
.hidden { display: none; }
</style>
<script type="text/javascript">
window.onload = function() {
var lis = document.getElementsByTagName('li');
for( var i=0; i<lis.length; i++ ) {
lis[i].onmouseover = function() {
console.log('onmouseover', this.firstChild.nodeValue.replace(/(\r|\n)+/, ''));
var ul = this.getElementsByTagName('ul');
if( ul.length )
removeClass( ul[0], 'hidden' );
}
lis[i].onmouseout = function() {
console.log('onmouseout', this.firstChild.nodeValue.replace(/(\r|\n)+/, ''));
var ul = this.getElementsByTagName('ul');
if( ul.length )
addClass( ul[0], 'hidden' );
}
}
}
function $( id ) {
return typeof id == 'string' ? document.getElementById(id) : id;
}
function removeClass( n, className ) {
if (! hasClass(n, className))
return;
var re = new RegExp( '(^|\\s+)'+className+'($|\\s+)' );
n.className = n.className.replace( re, ' ' );
}
function addClass( n, className ) {
if( hasClass(n, className) )
return;
n.className = [n.className, className].join(' ');
}
function hasClass( n, className ) {
var re = new RegExp( '(^|\\s)'+className+'($|\\s)' );
return n.className && n.className.match( re );
}
</script>
</head>
<body>
<ul>
<li>1
<ul class="hidden">
<li>1-1
<ul class="hidden">
<li>1-1-1
<li>1-1-2</ul>
<li>1-2
<ul class="hidden">
<li>1-2-1
<li>1-2-2</ul></ul>
<li>2
<ul class="hidden">
<li>2-1
<ul class="hidden">
<li>2-1-1
<li>2-1-2</ul>
<li>2-2
<ul class="hidden">
<li>2-2-1
<li>2-2-2</ul></ul></ul>
</body>
</html>