I've always found the best solution is to build the navigation as you
would like it to appear without JavaScript enabled and then manipulate
it with jQuery. Since the css doesn't have to wait for the DOM to be
built like jQuery, the effects will kick in instantly.
Example:
<ul id="nav">
<li><a href="">link 1</a>
<ul>
<li><a href="">link 1a</a></li>
</ul>
</li>
</ul>
style
#nav ul { display: none; }
#nav a:hover ul { display: block; }
Doing this allows for graceful degradation too.
On Dec 6, 7:22 pm, bytte <[EMAIL PROTECTED]> wrote:
> Thanks guys. I use the document.ready function. Actually, it only
> happens on IE (both 6 and 7), not on Firefox or Safari.
> I used the "display:none" css rule tiphipps pointed out and now I have
> the opposite problem: the current menu is hidden and after a second
> pops out. It's not ideal, but it's a lot nicer already.
>
> On 6 dec, 17:05, sawmac <[EMAIL PROTECTED]> wrote:
>
> > > This works great on my localhost. However, when I publish online I
> > > experience a problem: on page load the whole <ul> is shown for a
> > > second, including all nested <ul> submenu's, before it is hidden by
> > > jQuery. I guess this is because all <ul> elements need to be loaded
> > > into the DOM before the jQuery code is started?
>
> > Are you using the onload event or jQuery's document ready method? If
> > you're using onload then you need to wait until all assets like
> > images, flash movies have downloaded before the hide() function runs.
> > The jQuery method will hide the nested ul as soon as the dom is ready
> > to be manipulated
>
> > $(document).ready(function(){
> > $(ul ul).hide();
> > });
>
> > --dave
