vertical suckerfish menu

[catfish]

Hello again!
I am asking for help again. This time I am do some changes to the menu of a clients site. He is adding content and I wanted to go from a plain navigation column to the vertical suckerfish menu. I am happy with the way it is turning out but I do have some issues and I will explain them and add links here. I have looked at it in 3 browsers and am so far happy. It validates except for the google map link??

The original site is at http://www.raddcruisers.ca
my testing site is at http://www.raddcruisers.ca/menu_test_flyout.html

The problem (I'm pretty sure?) is with my widths (but maybe not) in the css. I've combined menus to get what I have now. I have combination px and ems which probably isn't right..... anyways what I notice is when I am working on it in dreamweaver with a split screen, and I try to add say a paragraph or a heading tag below this menu it shoves my left column out to the right. So of course I'm doing something wrong and hit undo a few times but the column remains out to the right. Please have a look at my pages here. I appreciate it allot as always

[Centauri]

Try these changes :

#nav, #nav ul { /* all lists */
		margin: 0;
		padding: 0;
		list-style-type: none;
		float : left;
		width : 170px;
	}
	
	#nav li { /* all list items */
		position : relative;
		float : left;
		line-height : 1.35em;
		margin-bottom : -1px;
		width: 100%;
	}
	
	#nav li ul { /* second-level lists */
		position : absolute;
		left: -999em;
		top: 0;
	}
	
	#nav li ul ul { /* third-and-above-level lists */
		left: -999em;
	}
	
	#nav li a {
		width: 148px;
		display : block;
		color : #E7DFC2;
		font-weight: bold;
		background-color : #CC0000;
		padding: 2px 10px;
	text-decoration: none;
	border-top: 1px solid #E7DFC2;
	border-bottom: 1px solid #aaa;
	border-left: 1px solid #E7DFC2;
	font-size: 12px;
	}
	
	#nav li a:hover {
	background-color:#CC0000;
	color:#000;
	padding: 2px 1px 2px 20px;
	border-left:10px solid #000000;
	width: 138px;
	}
	
	#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
		left: -999em;
	}
	
	#nav li:hover ul, #nav li li:hover ul, #nav li 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 */
		left: 170px;
	}

[catfish]

Thankyou very much for your time. That worked perfect. I'm wondering what this means with the width one afer another and the slash in the second one
width: 148px;
w\idth : 148px;

[Centauri]

Its a hack to be able to feed a different width setting to different browsers - can't remember what it targets and how as I never use that particular hack. Safe to remove the one with the slash.