This works well, with the exception that when hovering over any menu item, the first element in the unordered list (entertainment) also takes on the :hover state.
I’m a JS novice to say the least, any idea what’s wrong?
Think we’re talking about two different things here.
Sorry, my bad for the poor initial explanation. Let me start again:
Look at the main menu, just under the logo - the light brown buttons reading ‘Entertainment’, ‘Electronics’ etc. Hover over the ‘entertainment’ button - everything’s fine; the dropdown and hover effect works perfectly.
Now, move your cursor to any other button in the main nav. Everything works, however the ‘Entertainment’ button still takes on its hover state. See this image for example:
FYI - this works fine without subnav.js. This is just a piece of JS which makes a ‘li a’ retain its hover state when the cursor moves onto its associated dropdown menu list.
So, I hover over the ‘office’ button. It changes to its hover state, and the dropdown menu appears. Now, ordinarily, if I were to move onto the dropdown menu the ‘office’ button would lose its hover state.
I don’t want this to happen; so essentially, subnav.js kicks in and ensures that when I hover over the submenu, the class .active is applied to the ‘office’ button and the hover state remains.