Prevent an ASP.NET Menu from expanding over adjacent content

I have a two column layout, with a vertically oriented ASP.NET menu control in a narrow left column, and info related to the selected menu item in a wide right column:

<div class="span-4">
    <asp:Menu ID="categoryMenu" runat="server" Orientation="Vertical">
    </asp:Menu>
</div>
<div id="product-grid-pane" class="span-12 last">
    <asp:GridView ID="productGrid" runat="server" AutoGenerateColumns="false" ShowHeader="false" Width="100%">
    </asp:GridView>
</div>

If a menu item contains long text, the menu simply expands over the grid. How can I prevent this? I might need two answers here: the pure CSS one, which would be very nice if the menu control rendered nice, simple UL elements, but it seems 开发者_开发问答to prefer an impenetrable table based structure I may need additional help styling properly.

If you are using ASP.net 4.0 the Menu control has a property named RenderingMode which you can set to Table or to List.

Otherwise perhaps you can give the Table width:100% and table-layout:fixed and your containing div overflow:hidden.