Superfish: Submenu runs away before I can hover

[exoscoriae]

I am modifying my companies website and the person who originally built it used Superfish to create a few drop down menus.

One of the drop down menus points to an asset the company no longer owns, so I removed that section (exact change I made below).

This seemingly changed the behavior of all the menus however. Hovering over the main List item creates the drop down list. However moving the mouse cursor down to select one of these options immediately causes the sub-list to disappear.

This is the source before I made changes:
http://codepen.io/eXoScoriae/pen/YXmjXZ

And here it is after my change (removed one section):
http://codepen.io/eXoScoriae/pen/gpVjpX

Here is the line I specifically removed so you don’t have to go hunting it down:
http://codepen.io/eXoScoriae/pen/ZGgjGN

I also notice that on the old site, it slowly animates the appearance of the sub list, where-as on the new one it immediately appears.

I looked at the css files themselves to see if something was designated in there that would have been broken if I removed a menu item (such as something stating the specific number of sub list items), however I wasn’t able to locate anything that stood out as relevant.

That said, I am not very fluent at all in CSS.

Thanks in advance to any brace soul who decides to assist =)

[Paulie_D]

I think you’ve made some errors in the Codepens.

Note that each section HTML/CSS/Js are clearly marked. Try putting the right code in the right box.

[exoscoriae]

I moved it over to html, however it’s still not displaying the way it would on the website. I have no idea how I would do that since the html requires multiple css files.

[exoscoriae]

Thank you. I went and added the links to the css there, and now when I look at the code pen it actually shows a drop down menu. But for whatever reason it still looks like text links here.

I also find it odd that even though I can see the drop downs over at code pen – they both act like my second example. In other words, they immediately drop down w/ no animation/delay and immediately disappear when you move the mouse off the header.

edit:
I t appears my html editor is screwing up the parsing of the javascript.

Pasting the javascript variable in using notepad++, which retains the formatting, has fixed the issue.

[exoscoriae]

The html editor I was using is called Kompozer.

Never had problems with it reformatting text before, but I suppose I never had carefully spaced java script sections either.

It decided to remove carriage returns and make one line out of a long series of text.

Notepad ++ doesn’t pull shenanigans like that.

[Author]

Posts