asp:Menu flows out of page

I have this problem with the menu floating over the border of the page. to see the problem in action. http://finalfantasyworld.net/FinalFantasy/FFcompilation.aspx

i want t开发者_运维技巧o make them stop at the length of the menu. i have used sitemap to fill the ranks. if Views are to be static or dynamic don't really know how to use them so i have not modified them.

here is the ASP

<div class="liste">
<asp:Menu ID="Menu1" CssClass="ffcomp"  runat="server" DataSourceID="FFcompilationSiteMap" MaximumDynamicDisplayLevels="2">
</asp:Menu>
</div></div>
<asp:SiteMapDataSource ID="FFcompilationSiteMap" StartingNodeOffset="2" ShowStartingNode="false" runat="server" />

Here is the CSS

div.ffcomp
{
border:1px solid #ccc;
background-color:#333;
}

div.ffcomp ul
{
list-style: none;
width: auto;
height:100%;
}
div.ffcomp ul li a, div.ffcomp ul li a:visited
{
border-left:none;
border-bottom:3px solid #dde1ec;
border-top:none;
font-family: sans-serif;
font-size:13px;
font-weight:bold;
color: #c4e9ff;
display: block;
line-height: 1.35em;
padding: 9px;
text-decoration: none;
white-space: nowrap;
background-color:#333;
}

div.ffcomp ul li a:hover
{
color:#b02424;
border-bottom-color: #b02424;
border-bottom-style: solid;
border-bottom-width: 3px;
}

div.ffcomp ul li a:active
{
color: #cfdbe6;
border-bottom-color: #b02424;
border-bottom-style: solid;
border-bottom-width: 3px;
}

i think this is some sort of CSS related question.

I partially solved the problem its not a great solution and i would like a better one

#MainContent_Menu1 .level2
{
position:relative;
bottom:117px;
}
#MainContent_Menu1 .level3
{
position:relative;
bottom:312px;
}

possible future fail on it if the ID pops up some where else on the page