Gap betwen nested list items breaks css rollover menu

Hello there, I am having a bit of trouble with a CSS rollover menu.
What I have is is a CSS nav built with nested <ul> tags. The rollovers work fine and the submenu shows up, but the problem is that there is a small gap between the <li> tags that messes up the functionality.

When you roll through and come across the gap, the submenu disappears.

Here is an example. (http://www.equinoxdesigns.net/thermacraft)

Ive played with the margins and padding on the <ul>, the <li> and the <a> tags on both levels of the nesting but the gap remains.

Hello shaman420,
Seems to work fine for me with FF3.6 and IE8.

I see the gap on his second level menu..when your mouse rolls over the gap, they disappear. I tried looking at your code earlier to see where the gap is coming from. I couldnt find any margins on your <li> tags in your stylesheet, but I might have overlooked something.

Nope, works fine here. The only thing I see is Company History is misspelled.

The basic problem is that the hover is only applied to the a, which really means the text in the a tags. So I increased the font-size to 18px and now it does well. But it was flakey, sometimes work, sometimes not, before.

PS: works OK in Opera and Firefox now.

Since posting this, I found that changed the display:

.nav ul li

to

display:table-cell

That removes the gap and the menu works fine, just not in IE6-7..

Since posting this, I found that changed the display:

.nav ul li

to

display:table-cell

That removes the gap and the menu works fine, just not in IE6-7..If you've made that change on your web page it's still flakey on FF now, and IE 6 & 7 depends on the a text for hover. If I were you I would still make the font-size 18px, that should get it working on all browsers. I'll keep checking your site to see any improvement.