Проблем с CSS-а на падащо меню!

[DexterMorgan]

Здравейте,

имам проблем с CSS-а на едно меню и се надявам на малко помощ от ваша страна. Проблемът е следният: менюто има ховър ефект, но като преместиш стрелката надолу към суб менюто и ховъра изчезва? Пробвах с display: block;, но не става! Ето го и CSS-а на менюто:

CSS

#menu { background:#fff url(../img/menu.png) repeat-x; height:36px; width: 950px;margin-top:-20px;margin-bottom:-20px;}

ul { margin: 0; padding: 0; list-style: none; }

ul.main_menu li {
position: relative;
float: left;
padding: 0 3px 0 0;
}

ul.main_menu li a, ul.main_menu li a:link, ul.main_menu li a:visited {
float: left;
padding: 0 25px;
color: #215bd0;
font-size: 12px;
height: 36px;
line-height: 36px;
font-weight: 700;
outline: none;
text-decoration: none;
text-shadow: 1px 1px 0 #fff;
text-transform:uppercase;

}

ul.main_menu li a:hover {color: #fff;
background: #91aff9; text-shadow: 1px 1px #000; }
ul.main_menu li a span.arrow { color: #999; }
ul.main_menu li a#home:hover { color: #36C;
background: #efefef; }




ul.main_menu li ul.sub {
display: none;
position: absolute;
top: 36px;
left: 0px;
width: 200px;
border-left: 1px solid #d9d9d9;
border-right: 1px solid #d9d9d9;
z-index: 1000;
}

ul.main_menu li ul {
display: none;
position: absolute;
top: 36px;
left: -2px;
width: 200px;
border-left: 1px solid #d9d9d9;
border-right: 1px solid #d9d9d9;
z-index: 1000;
}

ul.main_menu li ul.sub li {
position: relative;
padding: 0;
background: none;

}

ul.main_menu li ul.sub li a, ul.main_menu li ul.sub li a:link, ul.main_menu li ul.sub li a:visited {
float: none;
display: block;
width: 180px;
border-bottom: 1px solid #d9d9d9;
height: 30px;
line-height: 30px;
padding: 0 10px;
font-size: 11px;
background: #91aff9;
color:#fff;
text-shadow: 1px 1px 0 #000;
}

ul.main_menu li ul.sub li a:hover {
color: #215bd0;
background: #efefef;
text-shadow: 1px 1px 0 #fff;

}

ul.main_menu li ul.sub li ul {
position: absolute;
top: -1px;
left: 200px;
border-top: 1px solid #d9d9d9;
}

JS

$(document).ready(function () {
$('.main_menu li:has(ul) > a').addClass('more');
$('a.more').append('<span class="arrow">&nbsp;&nbsp;&raquo;</span>');
$('.main_menu li').hover(function () {
$(this).find('ul:first').stop(true, true).animate({opacity: 'toggle', height: 'toggle'}, 200).addClass('active_list');
}, function () {
$(this).children('ul.active_list').stop(true, true).animate({opacity: 'toggle', height: 'toggle'}, 200).removeClass('active_list');
});
});

 

[uni-web]

От: Проблем с CSS-а на падащо меню!

Още с първия пост за проблем.

Сори ама аз нямам намерение да чета и се бъхтя с толкова редове код за една помощ.