Q:

Display none fails while page is rendering

Considering I have a basic nav like list: 
<nav>
  <ul>
    <li id="unhide" style="display:none;"></li>
    <li></li>
    <li></li>
  </ul>
</nav>

And some jquery...
jQuery(document).ready(function($) {
  $("#unhide").on('mouseenter', function() {
    $(this).css('display', 'block');
  }).on('mouseleave', function() {
    $(this).css('display', 'none');
  })
})

Why would the menu temporarily show while the page is loading but when the loading has completed, it's properly hidden. How can I fix that?

A:

I would suggest this
    jQuery(document).ready(function($) {
$("#unhide").mouseover(function() {
$(this).attr("class", '');
}).mouseout(function() {
$(this).attr("class", 'hide');
});
});

css
If you wonder why i did not apply the styles to the id directly. Its because you might want to target it with jquery for something else but it would also work by using #unhide instead of .hide
.hide {
   /* you can use the height 0.1 if you dont want
   it in layout else you can just erase the height proprety */
   height:0.1px;

   /* 0 opacity works */
   opacity:0;
}

html
<nav>
  <ul>
    <li id="unhide" class='hide'>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</nav>

You could also use the css attributes on the element directly like this 
<nav>
      <ul>
        <li id="unhide" style="height:0.1px;
         opacity:0;">One</li>
        <li>As said before the height is not useful</li>
        <li>Three</li>
      </ul>
    </nav>

and jquery
jQuery(document).ready(function($) {
    $("#unhide").mouseover(function() {
    $(this).css("opacity", '1');
    // if height
    $(this).css("height", '');
    }).mouseout(function() {
    $(this).css("opacity", '0');
    //if height
    $(this).css("height", '0.1px');
    });
    });

I think that should work, and i also think that the problems comes from the fact that display none actually prevents mouse hover event listeners
https://jsfiddle.net/qh7gwecc/2/

