Problem with nested uls and IE6/IE7
Hi,
I have some problem with a nested menu on IE6/IE7. It works perfectly
in firefox/oper/safari on windows and in firefox/safari on mac.
Is this a bug, there is some workaround?
This is the HTML code:
<ul id="menu">
<li>
<a href="#">PROJECTS</a>
<ul class="submenu">
<li>
<a href="#">MARKET SEGMENT 1</a>
<ul class="submenu2">
<li>
<a href="#">MARKET SEGMENT 1</
a>
</li>
<li>
<a href="#">MARKET SEGMENT 2</
a>
</li>
</ul>
</li>
<li>
<a href="#">MARKET SEGMENT 2</a>
</li>
</ul>
</li>
<li>
<a href="#">NEWS & EVENTS</a>
</li>
</ul>
And this is the javascript:
$(document).ready(function(){
//all the ULs invisible
$('#menu ul').css({'opacity':0});
//make visible the UL next to the li onmouseover
function open(){
$(this).children('ul').animate({'opacity': 1},
250);
}
//make invisible the UL next to the li onmouseout
function close(){
$(this).children('ul').animate({'opacity': 0},
500);
};
$('#menu li').hover(open, close);
});