Сделал такое "разъезжающееся" меню на чистом css:
#nav {
}
#nav, #nav ul {
list-style:none;
padding:0;
}
#nav ul {
position:relative;
z-index:-1;
}
#nav li {
position:relative;
z-index:100;
}
#nav ul li {
margin-top: -34px;
-moz-transition: 0.4s linear 0.4s;
-ms-transition: 0.4s linear 0.4s;
-o-transition: 0.4s linear 0.4s;
-webkit-transition: 0.4s linear 0.4s;
transition: 0.4s linear 0.4s;
}
#nav li a {
width: 285px;
background-color: #DF2222;
text-align: center;
color: #fff;
display:block;
font-size:12px;
font-weight:bold;
line-height:28px;
height: 28px;
outline:0;
text-decoration:none;
margin-top: 5px;
border-radius: 5px;
}
#nav li a.sub {
/* background:#950301 url("../images/down.gif") no-repeat; */
}
#nav li a + img {
cursor:pointer;
display:none;
height:48px;
left:0;
position:absolute;
top:0;
width:200px;
}
#nav li a img {
border-width:0px;
height:24px;
line-height:28px;
margin-right:8px;
vertical-align:middle;
width:24px;
}
#nav li a:hover {
background-color:#950301;
}
#nav ul li a {
background-color:#eee;
border-bottom:1px solid #ccc;
color:#000;
font-size:11px;
line-height:22px;
}
#nav ul li a:hover {
background-color:#ddd;
color:#444;
}
#nav ul li a img {
background: url("../images/bulb.png") no-repeat;
border-width:0px;
height:16px;
line-height:22px;
margin-right:5px;
vertical-align:middle;
width:16px;
}
#nav ul li:nth-child(odd) a img {
/* background:url("../images/bulb2.png") no-repeat; */
}
#nav a.sub:focus {
background:#bcbdc1;
outline:0;
}
#nav a:hover ~ ul li, #nav a:hover ~ ul li:hover {
margin-top:0;
-moz-transition: 0.4s linear;
-ms-transition: 0.4s linear;
-o-transition: 0.4s linears;
-webkit-transition: 0.4s linears;
transition: 0.4s linear;
display:block;
}
#nav a:hover + img, #nav a:hover + img {
display:block;
}
#nav a.sub:active {
background:#bcbdc1;
outline:0;
}
#nav a:active ~ ul li {
margin-top:0;
}
#nav ul:hover {
display:block;
}
<div class="sidebar-title" style="width: 280px;"><span style="font-weight: bold;">Наша продукция</span></div>
<ul id="nav">
<li><a href="products/electromotors">Электродвигатели</a>
<ul>
<li><a href="products/electromotors/10-adhr">Электродвигатели АДЧР</a></li>
<li><a href="products/electromotors/elektrodvigateli-dlya-obduva-transformatorov">Для обдува трансформаторов</a></li>
<li><a href="products/electromotors/39-able">Электродвигатели ABLE</a></li>
<li><a href="products/electromotors/9-air">Общепромышленные серии АИР</a></li>
</ul>
</li>
<li><a href="products/invertors">Преобразователи частоты</a></li>
<li><a href="products/softstarters">Устройства плавного пуска</a></li>
<li><a href="products/servo">Сервоприводы</a></li>
<li><a href="products/reduktory">Редукторы, мотор-редукторы</a></li>
<li><a href="products/cable">Кабельная продукция</a></li>
<li><a href="products/encoders">Энкодеры (датчики вращения)</a></li>
<li><a href="products/recuperators">Рекуператоры</a></li>
<li><a href="products/delta/shkafy-upravleniya">Шкафы управления</a></li>
<li><a href="products/fans">Вентиляторы</a></li>
<li><a href="products/panels">Панели оператора</a></li>
<li><a href="#">Электромагнитные тормоза</a></li>
<li><a href="#">Комплектные электроприводы</a></li>
</ul>
Пример на jsFiddle
Проблема в том, что при наведении на внутренние пункты меню (которые разъезжаются), оно складывается.
Как сделать, чтобы складывалось только при наведении на другой "корневой" пункт меню или вообще ухода мышки за пределы меню? Активен первый пункт меню.