Как сделать, что бы при наведении на блок, другой блок не прятался??

Question

Max @maxprof

Студент

Как сделать, что бы при наведении на блок, другой блок не прятался??

Здравствуйте, помогите довести меню до ума пожалуйста.
Есть главное меню. При наведении на один из его пунктов появляется подложка и над ней под меню.
Вот код для определения высоты подложки и для ее появления.

$(document).ready(function(){  
	$('.main-menu,.white-text-bgc').hover(function(){ 

	// Считаю высоту подлжки
	quantityElementsMainMenu = $(".main-menu>li").length;
	heightMainMenu = quantityElementsMainMenu * 30;
		$(".white-text-bgc").height(heightMainMenu);
		$(".white-text-bgc").css("border","1px solid #a6a6a6");
		$(".white-text-bgc").css("display","block");
	//Конец подложки
		$(".img_block-white_podlozka").css("display","block");
		//Наведение на пункты
	}, function(){
		$(".white-text-bgc").css("display","none");
		$(".img_block-white_podlozka").css("display","none");
	});

Проблема в том, если убрать курсор с под менюшек и оставить на подложке, то подменю прячется, и остается просто белая подложка. Как сделать, что бы при наведении на подложку подменю не пряталось??
Код менюки css

.main-menu{
    background-color: #FFF;
    width: 220px;
    height: auto;
    position: relative;
    margin-left: 10px;
    border: 1px solid #a6a6a6;
}
ul.main-menu>li>ul{
    border: 1px solid #a6a6a6;
    display: none;
}
ul.main-menu>li>ul>li>ul{
    border: 1px solid #a6a6a6;
    display: none;
    margin-top: 0px;
}
ul.main-menu li {
    height: 30px;
    padding-left: 15px;
    border-right: 6px solid transparent;
    border-left: 3px solid transparent;
    padding-top: 3px;
}
ul.main-menu li:hover  {
    font-family: Tahoma;
    font-size: 14px;
    color: #FFF;
    text-decoration: none;
    background-color: #4586f3;
    border-right: 6px solid #1B5AC2;
    border-left: 3px solid #1B5AC2;
}
.white-text-bgc:focus ul.second-main-menu li{
    display: block;
}
.white-text-bgc:hover ul.second-main-menu li{
    display: block;
}
ul.main-menu a{
    text-decoration: none;
    color: #6C6C6C;
}
ul.main-menu>li:hover>a{
    color: #FFF!important;
}
ul.main-menu a:hover{
    text-decoration: none;
}
ul.dropdown>li.mainLi:hover > ul {
    display: none;
}
ul.main-menu>li:hover > ul {
    display: block;
    position: absolute;
    left: 100%;
    top: -1px;
    width: 250px;
    z-index: 3;
}
ul.third-main-menu {
    top: -1px;
    margin-left: 232px;
    position: absolute;
    width: 250px;
}
ul.main-menu>li:hover ul.main-menu>li>ul{
    display: block;
}
ul.main-menu>li:hover>ul>li:hover ul{
    display: block;
}
.white-text-bgc:hover ul.second-main-menu{
    display: block;
}
.white-text-bgc{
    background-color: #FFF;
}
.white-text-bgc2{
    border: 1px solid #a6a6a6;
    display: block;
    background-color: #FFF;
}
ul.main-menu>li:hover a{
    color: #000;
}
ul.second-main-menu li:hover {
    color: #FFF;
    text-decoration: none;
    background-color: #efefef;
    border:none;
    font-weight: bold;
    font-family: Tahoma;
    font-size: 13px;
    border: 1px solid #a6a6a6;
    width: 250px;
}
ul.second-main-menu li{
    border: none;
    font-weight: bold;
    font-family: Tahoma;
    font-size: 13px;
    line-height: 30px;
    border: 1px solid transparent;
    padding-top: 0;
}
ul.third-main-menu{
    background-color: rgba(255,255,255,.8);
}
ul.third-main-menu li {
    font-weight: normal;
    border: 1px solid transparent;
    opacity: 1;
}
ul.third-main-menu li:hover {
    font-weight: normal;
    color: #4a4a4a;
    opacity: 1;
    background-color: #efefef;
}
ul.second-main-menu li {
    margin-left: -1px;
}

ul.main-menu>li img{
    display: none;
}