Superfish dropdown menu - css problem (I think)

HTML & CSS
1

Hi there,

I’ve using the Superfish jquery plugin for a drop down menu but for some reason I can’t budge the dropdown menu from its position. It is directly beneath the text of the menu item but it needs to be in line with the bottom of the menu. I have tried altering the css but it isn’t shifting for some reason. It could be a javascript issue but i don’t see how as the css controls the positioning (or should anyway).
The menu is here:
http://celebsusa.com/menu-test.html

Does anybody know why this is happening?

Any help would be most appreciated.

Thanks,
Dan

2

Thanks for the update, and glad it’s working for you. : )

3

You’re a diamond - the menu is working perfectly now! Thanks for your help.

4

Hi,

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:			0;
	top:			2.5em; /* match top ul list item height */
	z-index:		99;
}

Is this the part of the CSS you have been trying to change? It certainly should be the part that affects how high the submenu sits.

Unfortunately there’s a lot of weird margins on parent containers, and I don’t see why (they’re surely unnecessarily complicating things).

If you set this to 3.5em does it go lower?

You are pulling the menus “up” instead of to the side with “left”… this should generally be ok so long as you are sure Opera doesn’t puke with it (Opera seems to have harder limits with widths and margins than some other browsers). However since the menu itself is pulled up -59px… just makes the math weirder for me.

As a note, I visited the page without any JS enabled cause I generally surf without.
If you are ever unsure whether a problem you see is jQuery or HTML/CSS, simply view your page with Javascript disabled. You will know right away most of the time who the problem belongs to.

5

Wow, that was a fast reply. I’ve just realised I was being a muppet - I was editing a copy of the css file which is why it wouldn’t change. I’ve sorted that now - however, I am having another problem:
When you hover over the dropdown menu the hover colour of the main menu item disappears. Would you happen to know why this is? I’m not sure whether this would be more javascript related though.
Thanks for the quick reply.

6

I’ve just realised I was being a muppet - I was editing a copy of the css file which is why it wouldn’t change.

Lawlz, still happens to me sometimes.

When you hover over the dropdown menu the hover colour of the main menu item disappears. Would you happen to know why this is? I’m not sure whether this would be more javascript related though.

It can be CSS’d except possibly not for IE6 (I forget).

Lessee, how did I do it…

I’d have a few things, but this one is the least iffy and goofy (for a ul with the id of #menu):

#menu li:hover>a {
background-color: #f60;
}

IE6 won’t see anything with a >. There may be a workaround for that (jQuery may already be doing it for IE6).

Since while you are hovering over the submenu, you are also still hovering over the li, that li’s direct child anchor should remained highlighted.

In my other menus I’ve put the bg on the li itself:
#menu li:hover {
background-color: #f60;
}

and I’ve also said “any descendant of #menu who’s hovered, their direct child anchor gets the styles”:
#menu :hover>a {
background-color: #f60;
}

For IE6 you can also use #menu li.hover a {styles} and then later override them for sub-anchors who get a different colour:
#menu ul li a:hover {new styles;}

If you’d like to add some keyboarding to the plain CSS, you’ll find that em don’t work for some reason. Because I want keyboarding to be able to work even if no JS, I used px for my margins, I made use of the + selector to say “whenever a main-level anchor is focussed on, bring the next sibling (who is the sub menu) onscreen”, and I ended up restating things like widths on :focus too.

Otherwise, what’s easier (and you should be doing it anyway) is if someone for whatever reason can’t get the dropdown to appear (lots of reasons), clicking on that main-level link (link2 in your case) brings the user to the same possible choices (sub item 1 or 2).