Rather than post a load of code here I was going to link to a site I'm developing that I need help with. However, I realise that's against the rules to add URLs, so I'll try and summarise my problem as best as possible.

The situation:

I have two divs that are floated to the left. The LHS div holds my navigation while the RHS div holds the content. I've tried to create a CSS-only vertical 'flyout' menu whereby hovering over the first-level list item reveals any child items there may be.

Here's an example of the LHS div:

<div id="nav" class="floatleft">
<ul id="catmenu">
 <li>Item A</li>
 <li>
 <ul>
 <li>A sub-item 1</li>
 <li>A sub-item 2</li>
 </ul>
 </li>
 <li>Item B</li>
 <li>Item C</li>
</ul>
</div>

And the RHS content:

<div id="content" class="floatleft">
<table>
 <tr>
 <td>Content</td>
 </tr>
</table>
</div>

I wouldn't normally use a table, but I'm using an ecommerce package that generates the code and it would take me seven thousand years (and a half) to change it, so I'm stuck with it.

The flyout works perfectly without the RHS floated div, but the minute I have the RHS div in place, the sub-items don't appear correctly.

Any ideas? I assume it's to do with the fact I'm floating the divs containing the nav list and content, but can't figure out a solution...

Thanks, here's the CSS code that goes with it:

/* Root = Vertical, Secondary = Vertical */
ul#catmenu,
ul#catmenu li,
ul#catmenu ul {
 border: 0 none;
 padding: 0;
 width: 160px; /*For KHTML*/
 list-style: none;
}
ul#catmenu,
ul#catmenu li,
ul#catmenu ul {
 margin: auto;
}
ul#catmenu:after /*From IE 7 lack of compliance*/{
 clear: both;
 display: block;
 font: 1px/0px serif;
 content: ".";
 height: 0;
 visibility: hidden;
}
ul#catmenu li {
 float: left; /*For IE 7 lack of compliance*/
 display: block !important; /*For GOOD browsers*/
 display: inline; /*For IE*/
 position: relative;
}
/* Root Menu */
ul#catmenu a {
 /* border: 1px solid #FFF;
 border-right-color: #CCC;
 border-bottom-color: #CCC; */
 padding: 0 6px;
 display: block;
 /* background: #EEE; */
 color: #666;
 font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
 text-decoration: none;
 height: auto !important;
 height: 1%; /*For IE*/
}
/* Root Menu Hover Persistence */
ul#catmenu a:hover,
ul#catmenu li:hover a,
ul#catmenu li.iehover a {
 background: #CCC;
 color: #FFF;
}
/* 2nd Menu */
ul#catmenu li:hover li a,
ul#catmenu li.iehover li a {
 background: #EEE;
 color: #666;
}
/* 2nd Menu Hover Persistence */
ul#catmenu li:hover li a:hover,
ul#catmenu li:hover li:hover a,
ul#catmenu li.iehover li a:hover,
ul#catmenu li.iehover li.iehover a {
 background: #CCC;
 color: #FFF;
}
/* 3rd Menu */
ul#catmenu li:hover li:hover li a,
ul#catmenu li.iehover li.iehover li a {
 background: #EEE;
 color: #666;
}
/* 3rd Menu Hover Persistence */
ul#catmenu li:hover li:hover li a:hover,
ul#catmenu li:hover li:hover li:hover a,
ul#catmenu li.iehover li.iehover li a:hover,
ul#catmenu li.iehover li.iehover li.iehover a {
 background: #CCC;
 color: #FFF;
}
/* 4th Menu */
ul#catmenu li:hover li:hover li:hover li a,
ul#catmenu li.iehover li.iehover li.iehover li a {
 background: #EEE;
 color: #666;
}
/* 4th Menu Hover */
ul#catmenu li:hover li:hover li:hover li a:hover,
ul#catmenu li.iehover li.iehover li.iehover li a:hover {
 background: #CCC;
 color: #FFF;
}
ul#catmenu ul,
ul#catmenu ul ul,
ul#catmenu ul ul ul {
 display: none;
 position: absolute;
 top: 0;
 left: 160px;
}
/* Do Not Move - Must Come Before display:block for Gecko */
ul#catmenu li:hover ul ul,
ul#catmenu li:hover ul ul ul,
ul#catmenu li.iehover ul ul,
ul#catmenu li.iehover ul ul ul {
 display: none;
}
ul#catmenu li:hover ul,
ul#catmenu ul li:hover ul,
ul#catmenu ul ul li:hover ul,
ul#catmenu li.iehover ul,
ul#catmenu ul li.iehover ul,
ul#catmenu ul ul li.iehover ul {
 display: block;
}