IndigoHollow,
вариант ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.catalog-menu a {
padding: 10px 0;
}
.submenu {
background: #654B36;
position: absolute;
text-decoration: none;
font: normal 17px Arial;
height: 0px;
width: 950px;
margin-top: 10px;
margin-left: -492px;
padding: 0px;
z-index: 1;
-webkit-transition: all 5s ease-out 0.5s;
-moz-transition: all 5s ease-out 0.5s;
-o-transition: all 5s ease-out 0.5s;
transition: all 5s ease-out 0.5s;
}
.catalog-menu a:hover + div{
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
height: 420px;
}
.submenu:hover {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
height: 420px;
}
</style>
</head>
<body>
<ul>
<li>
<a href="/">ГЛАВНАЯ</a>
</li>
<div class="catalog-menu">
<li>
<a href="/catalog">КАТАЛОГ</a>
<div class="submenu">
<a href="/catalog/analoi/">АНАЛОИ</a>
<a href="/catalog/analoi/analoi_metallicheskie/"><span id="qwerty">металлические</span></a>
<a href="/catalog/analoi/analoi_derevyannye/"><span id="qwerty">деревянные</span></a>
</div>
</li>
</div>
</ul>
</body>
</html>