Entire drop-down menu quickly flashes upon page load

css, drop-down-menu, html, javascript, jquery

Solution

Set the dropdown menu as `display: none` in the page's CSS or directly in the element itself using `style="display:none"`. This will hide it as the page loads.

Problem

I have a standard drop-down menu that uses jQuery to hide the children `li` elements. However, upon loading the site, the child elements quickly appear and subsequently disappear (sort of like a quick flash). I don't think this is at all related to the flash-of-unstyled-content known issue. The site is in Hebrew, but that shouldn't affect anything. The site is located here If you'd like a sample HTML + CSS and the Javascript code, I would gladly post it here. I was just wondering if anyone has encountered this issue before. I'm seeing it in Chrome, and I haven't really checked if it also happens in IE and Firefox. Thanks! 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: ``` /* NAVIGATION -- level 1 */ 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 { } /* NAVIGATION -- level 2 */ 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; } /* used to push down the menu */ ``` JS: ``` // navigation menu // // add hasSubMenu to each li that has one // $('.menu > li').has('ul').addClass('hasSubMenu'); // wrap with <div> // $('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; }); // add class to <div> for extendedBg // $('li.extendedBg').find('div').addClass('subBg2'); $('li.hasSubMenu').hover(function () { // hover on $(this).addClass('hover').find('div').stop().fadeTo("medium", 1, /* when done fading */ function () { $(this).find('div').css('display', 'block'); //$(this).find('ul').css('display','block'); } ); }, function () { // hover off $(this).removeClass('hover').find('div').stop().fadeOut(); }); ```

Original source