Suckerfish dropdown out of line

I am trying to create my first suckerfish type menu.  I have figured out most of the styling issues with a lot of trial and error.  However, I still have one technical problem. When I select a root level menu item, the vertical child menu starts too far to the right, so I can not get to it.  It will always close before I reach the items.

eg.

Menu1          Menu2        Menu3
                 Menu1.1
                 Menu1.2

I have attached my css file in the hope someone can explain what I am doing wrong.

 Thanks

I have noticed some other strange behavour with regard to this menu in different browsers. In IE7, I get the symptoms above, where the verticsl child menuis offset from its parent, hence unable to be selcted.  In Firefox the white box that should contain the child menu items is below the parent like I would expect, however the actual menu items are still offest to the right.

This is all very confusing for me, I would appreciate any advice you can give.

Thanks

Hi Mark,

The difference between IE and FireFox will be  what is referred to as the "BoxModel" in IE. IE does padding and margins different.

You'll notice that in the sample suckerfish menu there is some weird css for width like this  w\idth: 3.5em; (notice the slash in the name) this is a hack to let IE use that width and mozilla browsers will ignore it.

I'm not sure why you have position:static in your CSS, but that may be the problem.

#nav li:hover, #nav li.hover {
    background:  White;
    position:static;
} 

My best advice would be to use the sample template and the move slowly away from that base while making your modifications so that you can see what each modification does.

For a complete explanation of why, what, & how also visit :

http://www.htmldog.com/articles/suckerfish/dropdowns/

Hi John,  I have now resolved the issue of the submenu being out of place.  I have now discovered another problem. This time I can get my cursor to the first item in the 1st submenu, but cannot get beyond that, the submenu closes if I try to move my mouse either to the next levelof submenu, or to the second or third item on the submenu.  I posted the created UL list from your control, along with my stylesheet to Experts Exchange for some advice, someone there noticed there is a closing /LI missing on the second level menu.

I have attached a text document with the source code from one of my pages. 

I have checked the template, copy attached also, and all the /IL seem to be present. 

Can you offer any suggections why the /IL is missing.

Thanks

A missing LI may be a bug that was corrected in the current release.  I have attached the latest DLL to this post.  If you put that in the /bin folder it may help.

The reason it works different on IE than on FF is because of IE's Box Model.

You have to adjust the positions so they work in both.  Yes, cross-browser issues are well documented.

If you want to attach your skin, I'll make the adjustments.

Hi,

Thanks for the offer of help.  I fully realise I am a P.I.T.A., and for this I apologise.

I have cleaned up my skin, and taken in all the things you have said.  And I think I am now about 95% of the way there.  I have working menus in both IE7 and FF, but still some differences in their appearances. If you have time would you mind to take a look, and tell me what I am doing wrong.

Again thanks for your help.

Mark,
As I look at this with both FireFox and IE they look almost exactly the same to me. 
The only difference is that FF has the sub-menus just a little closer to their parent, but both work and look fine.

I have attached a couple screen shots. Are you seeing something different?

Ahh, I see now.  The top CSS rule for the IE part should be changed to this (add the :hover psuedo-class):

.menu ul li.hover a:hover {color:#fff; background:#36f;text-decoration:none;}

And the nbsp; you have between the main nav and the adminhostlist menu is what is causing that extra height in IE.  You can use padding instead of the non-breaking space to get rid of that.

Yes, I know what you mean. CSS can be a real pain, especially across browsers.

But it can also come in really handy so I can't give it too bad a rap.

I'm glad you got it all working.