The menu crushes in on itself when you use a % based width because it's taking x% of the width of either the parent object or the page itself.
Example:
<div id="ParentBlock" style="display: block; width: 300px !important;"> <div id="MenuBlock" style="display: block; width: 100% !important;"> <!-- Menu items go here --> </div> </div>
In this example, the menu width will adjust to 300px wide because the div in which it has been placed is a block. If this isn't the case, then the menu will use the page's width as the parent and become as wide as the entire page.
I recommend NOT using CSS and Tables for layout on the same page. If you want to use both, use the CSS to style things like buttons and text ... Even paragraphs, but not object placement on the page. All you're doing by using both for layout is taking a one way trip into annoyance and failure.
Here's what looks like a decent tutorial on CSS menus, although it might contradict what I've just said.
http://www.webcredible.co.uk/user-friendly-resources/css/css-navigation-menu.shtml
HTH
