css relative sizing a dropdown nav menu

Hi all I'm trying get my dropdownhorizontal menu to size properly using ems but I'm not quite sure how to do it. I allways get overlapping. I just need it to work in ie7 and firefox. I know older ie's dont suport relative sizing but that's ok for now. Here's my html code and css code. If any1 can help me out it would be very helpfull.

html code:
HTML Code:

<ul>
<li><a href="#">Top 3 Movies</a>
<ul>
<li><a href="http://www.imdb.com/title/tt0099685/" target="_blank">Goodfellas</a></li>
<li><a href="http://www.imdb.com/title/tt0093058/" target="_blank">Full Metal Jacket</a></li>
<li><a href="http://www.imdb.com/title/tt0110912/" target="_blank">Pulp Fiction</a></li>
</ul>
</li>

<li class="rightBorder"><a href="#">Top 3 Games</a>
<ul>
<li><a href="http://www.gamespot.com/gamecube/action/residentevil/index.html?q=resident%20evil&amp;tag=result;title;8" target="_blank">Resident Evil</a></li>
<li><a href="http://www.gamespot.com/gamecube/action/metroidprime/index.html?q=metroid%20prime&amp;tag=result;title;4" target="_blank">Metroid Prime</a></li><li><a href="http://www.gamespot.com/gamecube/adventure/residentevil4/index.html?q=resident%20evil&amp;tag=result;title;5" target="_blank">Resident Evil 4</a></li>
</ul>
</li>
</ul>

css code:
Code:

body {
font-size:100%;
}

}
ul {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
margin:0;
padding:0;
list-style:none;
}
ul li {
position:relative;
float:left;
width:125px;
border-bottom:#000000 1px solid;
border-left:#000000 1px solid;
border-top:#000000 1px solid;
top:5px;
background-image:url(assets/bg_menu2.gif);
text-align:center;
}
li ul li {
border-bottom:#000000 1px solid;
border-left:#000000 1px solid;
border-right:#000000 1px solid;
border-top:0;
left:-1px;
}
li ul {
position:absolute;
left:0;
top:15px;
display:none;
}
ul li a {
display:block;
border-bottom:0;
text-decoration:none;
}
li:hover ul {
display:block;
}
.rightBorder {
border-right:#000000 1px solid; }

I guess no1 knows what I'm trying to do here. Ok. If you put the css code internal in the head and the html in the body and look at the menu in firefox(provided I didnt screw up the code anywhere) the menu seems to work fine, but when the text is sized up, the dropdown menu overlaps with the intial visible menu. There's the problem, I need the menu to scale down properly so nothing is overlapping while sizing text. Please, any help?

umm, usally when you increase the size of the text, it would almost definity increase the size of the box element.

What you probably need to do is set an absolute size of that box element.

I don't know where this dropdown menu is coming from.

All I see are unordered lists, and unordered lists inside of unordered lists.

send me a link to your website, and I might be able to help you further on your question.

I know, the menu is a bit unorthadox. But it works. I sent you a link. If any1 else can help please feel free.

Got the css code wrong in first post. This code works.
css code:

ul {
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
list-style:none;
}
ul li {

position:relative;
float:left;
width:125px;
border-bottom:#000000 1px solid;
border-left:#000000 1px solid;
border-top:#000000 1px solid;
background-color: #FFFFFF;
}
li ul li {
border-bottom:#000000 1px solid;
border-left:#000000 1px solid;
border-right:#000000 1px solid;
border-top:0;
left:-1px;
}
li ul {
position:absolute;
left:0;
top:20px;
display:none;
}
ul li a {
display:block;
border-bottom:0;
text-decoration:none;
}
li:hover ul {
display:block;
}
.rightBorder {
border-right:#000000 1px solid;
}

I just need it to work in ie7 and firefox. I know older ie's dont suport relative sizing but that's ok for now.
I'm not sure what you mean by that. For instance, IE 6 does support the em unit.

Have you managed to solve the problem? If not, it would be easier to help if you post a link. For example, we don't know from the code you posted which document type you are using. This affects rendering.