pop out menus - where to start

[maxelcat]

Hi

I have to design a vertical pop out menu. You can see the sort of thing I mean at

http://www.maxelcat.co.uk/ipc/index.html

I have used son of suckerfish. I thought I had it pretty well licked (oh foolish me). It wouldn't work properly - the menus got sticky - in IE7. There was a fix. SO I added that and now it works fine in IE, FF, Opera, however it doesn't work in safari. WHixh is a total pain because the customer has siad they want it in Safari.

Can anyone help please.

here's the css

#nav, #nav ul { /* all lists */
		padding: 0;
		margin: 0;
		list-style: none;
		float : left;
		width : 13em; /*was 11em*/
		/*font-weight : bold;*/
	}
	
	#nav li { /* all list items */
		position : relative;
		float : left;
		line-height : 1.5em;
		margin-bottom : -1px;
		width: 13em;
		border:1px solid #000000;
		/*background-color:#0000FF;*/
	}
	
	#nav li ul { /* second-level lists */
		position : absolute;
		left: -999em;
		margin-left : 13.05em;
		margin-top : -1.35em; /*-1.35 this sets the height of the pop outs - needs to be carefully adjusted will vary */
	}							/*depending on the line-height, font size and so on*/
	
	#nav li ul ul { /* third-and-above-level lists */
		left: -999em;
	}
	
	#nav li a {
		width: 13em;
		w\idth : 11em;
		display : block;
		color : black;
		/*font-weight : bold;*/
		text-decoration : none;
		background-color:#ffffff;
		/*border:1px solid #000000; need this border to keep roll over working*/
		padding : 0 1em; /*was 0.5*/
	}
	
	#nav li a:hover {
		color : #0039a6;
		background-color :#f2f7fc;
	}
	
	#nav li:hover ul ul, #nav li.sfhover ul ul,  {  /*#nav li.sfhover ul ul ul, #nav li:hover ul ul ul*/
		left: -999em;
	}
	
	#nav li:hover ul, #nav li li:hover ul,  #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items  #nav li li li:hover ul, */
		left: auto;
	}

IE7 fix - my ul list is called nav
#nav li:hover, #nav li.hover {
    position: static;
}


#nav li a.current:hover, #nav li a.current {color:white; background-color:#0039a6;}

Many thanks
Edward

PS On an aside I can't believe the hours I have wasted on trying to get cross browser function fly out/pop out menus. Loads of sites have them. I have tried 3 different solutions to this?

What do you guys do???

"I love deadlines - I love the noise they make as they go wishing past" (not mine of course, but very ture...0

 

[mkrausnick]

Try googling 'css flyout menu' - there are dozens of examples.

Mike Krausnick
Dublin, California

 

[Foamcow]

This may well be the same as Suckerfish. I did it a long while ago and I'd certainly used Suckerfish before then.

Anyway, it works in FF and Safari (I can't test in IE at the moment). It might give you some clues as to where you are going wrong.

http://www.foamcow.com/clients/rentacoder/CSSmenuH/index2.html

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[maxelcat]

thanks all

Have built another set - don't appaer to work either!

About to consider another career...

why do these things have to be so !7^%23n different across different machines? Eh?

"I love deadlines - I love the noise they make as they go wishing past" (not mine of course, but very ture...0

 

[Foamcow]

If you make sure you are using a proper doctype then you can be 'reasonably' confident of stuff working cross platform.
Nowadays I find that I only have to add 1 or 2 (ok 4 or 5) tweaks to accomodate IE

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[monksnake]

Padding seems to be the main "treak" for me.

<.