I have a standard dropdown menu in which jQuery is used to hide items lifor children. However, when the site loads, elements-elements quickly appear and subsequently disappear (like a quick flash). I do not think that this is generally related to the well-known problem related to unrelated content.
The site is in Hebrew, but it does not affect anything. The site is located here.
If you need HTML + CSS sample and Javascript code, I would love to post it here.
I'm just wondering if anyone has encountered this problem before. I see this in Chrome, and I really have not tested whether this also happens in IE and Firefox.
Thank!
EDIT: HTML / CSS / JS shown below:
HTML:
<ul class="menu">
<li><a href="#">blah</a>
<ul class="sub-menu">
<li><a href="#">blah</a></li>
</ul>
</li>
</ul>
CSS
ul.menu { float: right; list-style-type: none; font-size: 15px; margin-top: 50px; }
ul.menu > li{ float: right; display: inline; position: relative; margin-left: 30px; }
ul.menu li > a { display: block; color: #5c5d5f; text-decoration: none; border-bottom: solid 1px #9b9a95; }
ul.menu li:hover > a, ul.menu li a:hover , ul.menu li.current_page_item > a { color: black; }
body.home .current_page_item > a { }
body.home .current_page_item > a:hover { }
ul.menu li > div { display: none; width: 157px; height: 171px; margin-right: -10px; position: absolute; opacity:0; background: url(images/subNav_bg.png) no-repeat top right; }
ul.menu li > div span { height: 15px; background: transparent; display: block; }
JS:
$('.menu > li').has('ul').addClass('hasSubMenu');
$('li.hasSubMenu > ul').wrap('<div />');
$('ul.menu li > div').css('display', 'none');
$('ul.menu li > div').prepend('<span></span>');
$('li.hasSubMenu > a').click(function () {
return false;
});
$('li.extendedBg').find('div').addClass('subBg2');
$('li.hasSubMenu').hover(function () {
$(this).addClass('hover').find('div').stop().fadeTo("medium", 1,
function () {
$(this).find('div').css('display', 'block');
}
);
}, function () {
$(this).removeClass('hover').find('div').stop().fadeOut();
});