JQuery display none menu loading first as block

[Jenny Dithe]

Hi,

I have a menu and if you hover over the headings it shows an inline sub menu. The problem I have is that the page loads and for a second shows the full menu with all the subs before hiding the subs and just showing the top navigation headings.

I have tried
.css ('visibility', 'hidden')
$.('.ul').css('visibility', 'hidden')
$('.topnav > li > ul').hide();

I have added and removed visibility:hidden; from the style sheet relating to this ul.

I am completely out of ideas but it looks really messy having everything showing for that second.

Here is my code:

	$('.topnav > li > ul').css('display', 'none');

	$('.topnav > li').bind('mouseover', openSubMenu);
	$('.topnav > li').bind('mouseout', closeSubMenu);
		
		function openSubMenu(){
			$(this).find('ul').css('display', 'block');
		};

		function closeSubMenu(){
			$(this).find('ul').css('display', 'none');
		};

[DanInMa]

1. you can just use plain old CSS to take care of it

2. you dont need those functions

css:

.topnav li ul{
display:none;
}

$(".topnav > li").hover(
  function () {
   $(this).find('ul').toggle;
  }, 
  function () {
    $(this).find('ul').toggle;
  }
);

or maybe,

$(".topnav > li").hover(
  function () {
   $(this).find('ul').slideToggle;
  }, 
  function () {
    $(this).find('ul').slideToggle;
  }
);

[harbingerOTV]

The reason is because the HTML is being written before the JS changes the style. You need to use your style sheet to hide the elements.

edit: yeah, what he said

[Jenny Dithe]

This is how my style sheet looks:

.topnav{
	margin:0;
	padding:0;
	}
.topnav li {
	list-style:none;
	float:left;
	font-size:100%;
	width:11.1%;
	}

.topnav li a:link, .topnav li a:visited {
	display:block;
	background-color:#800000;
	text-decoration:none; 
	color:white; 
	}
.topnav li a:hover {
	background-color:#7B68EE; 
	text-decoration:bold;
	}
.topnav li ul {
	visibility:hidden;
	position:absolute;
	z-index:20;
	margin:0;
	padding:0;
	}
.topnav li ul li {
	visibility:hidden;
	display:inline;
	float:none;
	}

.topnav li ul li a:link, .topnav li ul li a:visited{
	visibilty:hidden;
	background-color:#800000;
	text-decoration: none;
	color: white;
	width:auto;
	opacity:0.6;
	filter:alpha(opacity=60);
	}
.topnav li ul li a:hover{
	visibility:hidden;
	background-color:#7B68EE; 
	opacity:0.6;
	filter:alpha(opacity=60);
	text-decoration:bold;
	}

I went for visibility:hidden so that it didn't clash with the display:inline for ul li - I don't know if that is causing the problem, but it is still showing the full menu and sub menu.

[Jenny Dithe]

Thank you. That worked. I think it was just taking a while for the new style sheet to be read.