Comments on: JavaScript Dropdown Menu with Multi Levels

By: Alex

Alex — Fri, 19 Mar 2010 16:21:02 +0000

So, I think I may have found a way to make this degrade gracefully without js. Works for me in Safari and Firefox. Haven't tested it in IE.

Just add this to your CSS:
ul.menu li:hover > ul { display: block; opacity: 1; }

For IE, may need to also add… filter: alpha(opacity=100);

By: Nate

Nate — Tue, 16 Mar 2010 15:35:26 +0000

^ forgot to mention the reason I said "forget it" was so you don't waste your time trying to help me debug that site I posted… because I am ripping out all that dropdown code right now and replacing it with something else.

By: Nate

Nate — Tue, 16 Mar 2010 15:33:56 +0000

forget it, I'm just going to use something else. If there's an issue with IE 8 and this ghosting problem, I might as well just move on to another script. thanks for your time.

By: Nate

Nate — Tue, 16 Mar 2010 15:26:50 +0000

Well, I don't have a top-border. And I still have a ghost.

Check it out: php.22graphics.com … you'll notice it only happens on the Web and Logos buttons. Not the Print button for some odd reason.

By: Margo

Margo — Tue, 16 Mar 2010 15:07:51 +0000

Wow, Alex is definitely right – in my case, too, it has to do with the border on the 'ul.menu ul' class. I had it set to 2px, and when I set it to 0 it eliminated the ghosting issue – BUT it also made it impossible to hover on the top menu level and then jump to hovering on the dropdowns to scroll through them (this might have to do with the rest of my styling – I have no borders around the main, top-level menu items and don't want 'em). The dropdown would vanish on mouse-out. I compromised by giving it a 1px border, which still leaves the teensiest ghost on the first of the dropdowns – prob not visible to someone who isn't looking for it.
Still – not the most ideal fix. Wish I understood the discrepancy between the shadow on some dropdowns and not others.

By: 25 Scripts for Dropdown Navigation Menus « Web design, Photoshop, illustrator tutorials, from beginner to advanced.

Tue, 16 Mar 2010 08:36:28 +0000

[...] JavaScript Dropdown Menu with Multi Levels [...]

By: Alex

Alex — Tue, 16 Mar 2010 01:00:26 +0000

I think i know what the ghost image is from, i was using a border of 2px white to drop the second menu down from the top tier. By using firebug i turned off this border and the ghosting disappeared. So i have kind of hacked my css to display the top-border on :hover and only then. so the ghosting now is gone, but the closing animation has a slight jump due to losing the top border on close.

By: Nate

Nate — Mon, 15 Mar 2010 21:08:22 +0000

Ha, same here! Ghost image left after rollout!

Glad it's not just me. It's funny how I didn't notice it until today. I've been using it for several weeks. It does not happen on the FIRST dropdown, however. Only on the second and third dropdowns.