<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<style type="text/css">
#menu ul{margin:0;padding:0;border-bottom:1px solid #888;list-style:none;width:126px;}
#menu li{padding:2px;border-style:solid;border-width:1px 1px 0 1px;border-color:#888;width:120px;line-height:22px;position:relative;background-color:#ccc;}
#menu ul ul{display:none;position:absolute;top:-1px;right:-123px;z-index:1;}
#menu a{color:#00f;text-decoration:none;display:block;font-size:12px;}
#menu a:hover{text-decoration:underline;color:#e82;}
</style>
<body>
<div id="menu" style="margin:100px;padding:2px;">
<ul>
<li><a href="javascript:void(0);">menu></a>
<ul>
<li><a href="javascript:void(0);">menu></a>
<ul>
<li><a href="javascript:void(0);">menu</a></li>
<li><a href="javascript:void(0);">menu</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">menu></a>
<ul>
<li><a href="javascript:void(0);">menu</a></li>
<li><a href="javascript:void(0);">menu></a>
<ul>
<li><a href="javascript:void(0);">menu</a></li>
<li><a href="javascript:void(0);">menu</a></li>
<li><a href="javascript:void(0);">menu</a></li>
<li><a href="javascript:void(0);">menu</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">menu</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
(function () {
function addEvent(ele, type, fn) {
if (ele.addEventListener) {
ele.addEventListener(type, fn, false);
return true;
} else if (ele.attachEvent) {
return ele.attachEvent('on' + type, fn);
} else {
elem['on'+ type] = fn;
}
};
var mi = function (_e) {
this.style.backgroundColor = '#fff';
var e = _e || window.event;
var that = e.relatedTarget || e.fromElement;
if (that) {
if (typeof(this.compareDocumentPosition) === 'function' && this.compareDocumentPosition(that) == 20 || typeof(this.contains)==='function' && this.contains(that)) {
return;
}
}
var ds = this.getElementsByTagName('ul');
if (ds.length > 0) {
ds[0].style.display = 'block';
}
};
var mo = function (_e) {
var e = _e || window.event;
var that = e.relatedTarget || e.toElement;
if (that) {
if (typeof(this.compareDocumentPosition) === 'function' && this.compareDocumentPosition(that) == 20 || typeof(this.contains)==='function' && this.contains(that)) {
return;
}
}
this.style.backgroundColor = '';
var ds = this.getElementsByTagName('ul');
if (ds.length > 0) {
ds[0].style.display = 'none';
}
};
var el = document.getElementById('menu');
var ms = el.getElementsByTagName('li');
for(var i = 0, l = ms.length; i < l; i ++) {
addEvent(ms[i], 'mouseover', mi);
addEvent(ms[i], 'mouseout', mo);
}
})();
</script>
</html>