Проблем с меню и припокриване на елементите

[misho]

Имам следното меню:

<nav>
                <ul class="clear">
                    <li><a href="#">Меню1</a></li>
                    <li>
                    	<a href="#">Меню2</a>
                        <section class="submenu">
                        	<header><a href="#">Меню2</a></header>
                            <ul>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                            </ul>
                        </section>
                    </li>
                    <li>
                    	<a href="#">Testimonails</a>
                        <section class="submenu">
                        	<header><a href="#">Меню3</a></header>
                            <ul>
                                <li><a href="#">5</a></li>
                                <li><a href="#">6</a></li>
                                <li><a href="#">7</a></li>
                                <li><a href="#">8</a></li>
                            </ul>
                        </section>
                    </li>
                    <li><a href="#">Меню4</a></li>
                    <li><a href="#">Меню5</a></li>
                </ul>
            </nav>

А този JS кара .submenu да изкача, когато е посочен елемент от менюто.

$(document).ready(function() {
			$('#header nav ul > li').bind('mouseenter', openSubMenu);
			$('#header nav ul > li').bind('mouseleave', closeSubMenu);
			
			function openSubMenu() {
				$(this).find('.submenu').fadeIn(100);	
			};
			
			function closeSubMenu() {
				$(this).find('.submenu').fadeOut(100);	
			};
		});

Проблемът идва от защрихованата в червено зона. Това е част от .submenu, но не и от съдържащите се в него header и ul списък. Работата е там, че .submenu покрива съседния елемент от менюто и когато го посоча при отворено подменю няма реакция, а съответно би трябвало подменюто да изчезне и да се покаже другото, ако има такова.
Най-странното е, че единствено в IE9 се получава търсеният ефект, но не и в другите браузъри.
Може би трябва да се наблюдава друг елемент за mouseleave?

 

[bytheway]

Защо не пробваш да засичаш за hover т.е. при hover върху определен бутон от менюто да се показва подменюто.

Освен това не съм много сигурен, че е правилно да използваш header и section на това място.
По-добре ги премахни и остави само ul - li

 

[misho]

С hover вместо mouseenter резултатът е същият. Проблемът е, че което и събитие да използвам, не се засича, защото .submenu, макар и с прозрачен фон, реално стои над основното меню и мишката действа върху .submenu.
Не мога да си обясня, обаче, как това не е проблем за IE. :lol:

Иначе, за section и header съм съгласен. Май, ще е най-добре просто с един div.

 

[bytheway]

Пробвай така:

[js]
$('#header nav ul li').hover(function () {
$(this).find('.submenu').fadeIn(100);
}, function () {
$(this).find('.submenu').fadeOut(100);
});
[/js]

 

[misho]

Да, това е един вариант. По този начин също работи, но и проблемът си остава. Ето нагледно какво се случва:

Така отворено .submenu скрива Меню4 и всъщност не може да се хване hover на Меню4. Просто „мишката не достига“ до него.
Може би, трябва да отварям подменюто при посочване на #header nav ul li, както е и в момента, но да го затварям при напускане на ul или header (е, няма да е точно header, но... ), а не на целя div. Но не мога да измисля как да направя това условие? :lol:

 

[bytheway]

Дай малко css. По-скоро там е проблема.

 

[misho]

CSS:

#header nav ul li {
	float: left;
}
.submenu {
	display: none;
	position: absolute;
	margin: -53px 0 0 -10px;
	border-radius: 6px;
	z-index: 100;
}
.submenu header {
	display: table-cell;
	padding: 0 10px 15px 10px;
	line-height: 35px;
	border-radius: 7px;
}
.submenu ul {
	padding: 12px 0 25px 0;
	margin-top: -15px;
}
.submenu ul li {
	float: none !important;
	margin: 0 10px;
}

Първо си помислих дали z-index-а не бърка нещо, но и без него е така. Трябваше ми, за да не потъва подменюто някъде навътре в header-а, под останалото съдържание.

 

[bytheway]

Определено проблема ти е в CSS кода. О, също така и в елементите header и section, които си поставил. Премахни ги

Набързо написах един примерен код, който се надявам да ти бъде от полза. Поне като за начало работи добре, а ти ще си добавиш нужния стил.

 

[misho]

Благодаря! Помогна ми много.
В крайна сметка го направих почти същото, но без контейнера, които правеше проблема.

<nav>
                <ul class="clear">
                    <li id="pointer"><a href="#">Меню1</a></li>
                    <li>
                    	<a href="#">Меню2</a>
                        	<div class="submenu-header"><a href="#">Меню2</a></div>
                            <ul class="submenu">
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                            </ul>
...