I am having trouble with the margin gap in EI 6 when I cursor over the flyout menu. If I remove the margin it works fine but I like the look with a margin better. It works fine on Firefox. So the problem is the menu disappears when I get near the bottom of any of the menus.

See here: http://www.ss-interactive.com/test.html

table {border-collapse:collapse; border:0; margin:0; padding:0;}

.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a:hover {
	color:#FFFFFF;
	background-color: #292929;
	background-image: url(../images/mainNav_bullet_white.gif);
	background-repeat: no-repeat;
	background-position: 2px;
}
.menu ul li a:hover ul {display:block; position:absolute; top:0px; left:150px; width:105px;}
.menu ul li a:hover ul li a.sub {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a {
	background-color: #990000;
	filter: alpha(opacity=75);
	border: 1px solid #B70000;
	background-image: none;
	margin-bottom: 2px;
}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {
	background-color: #B70000;
	background-image: url(../images/mainNav_bullet_white.gif);
	background-repeat: no-repeat;
	background-position: 2px;
	filter: alpha(opacity=100);
}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:151px; top:0; color:#000;}
.menu ul li a:hover ul li a:hover ul li a {display:block; width:200px; background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;}

Why on earth do you need a table ?? Get rid of it, I don't see the need for it at all and the you don't have to debug around it.

Have you tried using padding instead of margin on the <a>s ?

Thanks LadynRed,

I got rid of the table and replaced margin with padding. Doesnt do the trick. I just need a 2px gap between the flyout buttons as it appears in Firefox.

Is there any other CSS tags I could use to seperate the buttons without closing the flyout menu when you roll over the gaps?

Lots of options, start here:
http://css.maxdesign.com.au/listutorial/index.htm

Then have a look around here: http://www.cssplay.co.uk/menus/index.html

I am using this one:
http://www.cssplay.co.uk/menus/flyoutt.html

But I can't get the margin gap to work in IE as it does in Firefox.

When I rollover the flyout menu in Firefox it doesnt close when I go over the gaps. My problem is that this happens in IE.

Does anyone know how to have a margin gap between the flyout buttons co-exist in IE and firefox?

http://css.maxdesign.com.au/listutorial/index.htm