CODEWITHSUNDEEP
javascriptjquerycss
nicorellius
nicorellius

Reputation: 4043

JavaScript May Be Interfering with CSS 3-Level Navigation System

This fiddle works (see We Distribute under Products):

http://jsfiddle.net/dgUFw/1362/

But on the page in the context of the website I'm building, I have JavaScript running (including jQuery). There is a slideshow on the home page, for example, and when I hover the 3rd level of the fiddle navigation, it goes away after a second or two. Plus, there are other weird behaviors I can't explain, like the 3rd level li moving to be on top of the 2nd level list, etc, where this doesn't occur in the fiddle.

I'm relatively new to integrating CSS and JavaScript together, so I have not seen this behavior.

When I turned off JavaScript in Firefox, the behavior seemed to subside.

What is causing this and how can I fix it? I tried different JS libraries and CSS normalization on jsfiddle.net as well, and the results were the same. I also tried Opera with same fiddle results and worse website results. Chrome seems to be more robust and less prone to mis-behaving.

You may have noticed also that when inside the 3rd level, the 2nd level We Distribute text is black. I'm also having difficulty getting this to remain white. But this isn't my primary question here. I'm most interested in the JavaScript/CSS interactions.

EDIT NOTE

I took some advice from below and tested this more:

I did some more testing on the fiddle: http://jsfiddle.net/nicorellius/dgUFw/1368/ I found that if you click "We Distribute" the menu collapses on itself. This is actually similar behavior to what I'm seeing on the website, except the collapse occurs without clicking. After clicking the menu and it collapses, then hover doesn't bring it back to normal, which I would expect it would.

Upvotes: 0

Views: 210

Answers (1)

Samsquanch
Samsquanch

Reputation: 9146

Two things:

First, I think your problem with the menu disappearing is due to z-index. The slideshow probably has a higher, or the same, z-index, causing the menu to lose its hover state. To fix this:

#nav-top li, #nav-top li a {
    z-index: 1000;
}

Second, for your color/hover issues, you need to change up your CSS a bit:

#nav-top li a:hover {
    color: #fff;
}

#nav-top li#products-sub:hover > a, #nav-top li#home-sub:hover > a,
#nav-top li#faq-sub:hover > a, #nav-top li#user-sub:hover > a, #nav-top li ul.dist-sub:hover  {
    color: #fff;
}

This will keep the hover-state of the li and set the color of the link based on that rather than the link.

Fiddle with the changes: http://jsfiddle.net/dgUFw/1364/

Upvotes: 2

Related Questions