<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
#nav_menu_content * {
margin: 0;
padding: 0;
margin: 0;
padding: 0;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
#nav_menu_content{
background:#fff url(http://s2.uploads.ru/dNObX.png) repeat-y -76px 0;
/*border:red solid 1px;*/
list-style: none;
padding-left: 12px;
display:inline:block;
width:134px;
}
#nav_menu_content ul {
background-color:#3D81F3;
list-style-position: outside;
text-align:left;
position: absolute;
margin-left:100px;
margin-top:-20px;
padding: 0 3px 0 0;
list-style: none;
display: none;
}
#nav_menu_content li {
border-bottom:#fff solid 1px;
list-style: none;
margin:4px auto 4px 4px;
padding:2px 4px;
}
#nav_menu_content ul>li {
border:red solid 1px;
list-style: none;
margin:4px auto 4px 4px;
padding:2px 4px;
}
#nav_menu_content > li:hover {
background-color:#fff;
}
</style>
</head>
<body style="padding-left:13%;padding-top:60px;">
<ul id='nav_menu_content'>
<li><a href='#0'>Категория 1</a>
<ul>
<li><a href="#">Субкатегория 1</a>
</li>
<li><a href="#">Субкатегория 2</a>
</li>
<li><a href="#">Субкатегория 3</a>
</li>
</ul>
</li>
<li><a href='#0'>Категория 2</a>
<ul>
<li><a href="#">Субкатегория 4</a>
</li>
</ul>
</li>
<li><a href='#0'>Категория 3</a>
<ul>
<li><a href="#">Субкатегория 5</a>
</li>
<li><a href="#">Субкатегория 6</a>
</li>
</ul>
</li>
<li><a href='#0'>Категория 4</a>
<ul>
<li><a href="#">Субкатегория 7</a>
</li>
<li><a href="#">Субкатегория 8</a>
</li>
<li><a href="#">Субкатегория 9</a>
</li>
</ul>
</li>
</ul>
<script type="text/javascript">
var timerId0;
$('#nav_menu_content >li').mouseenter(function(){
var a=$(this).find("ul:first");
clearTimeout(timerId0)
$('#nav_menu_content >li>ul.active').not(a).fadeOut("slow");
a.addClass('active').fadeIn("slow");
}).mouseleave(function(){
var a=$(this).find("ul:first");
if(a.hasClass('active'))
timerId0=setTimeout(function(){a.fadeOut("slow");},970)
});
</script>
</body>
</html>