Drop-down CSS navigation not working in Firefox - css

Question

I'm working on getting my site up and running, and I've run into a problem with my drop-down navigation menu in Firefox.
I have been using the site in Chrome and it works fine, it is a simple setup of nested lists for the selections. The options appear, but they are floating to the left instead of directly below their appropriate section.
CSS:
/*sub-menu navigation*/
nav.primary ul ul
{
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
z-index: 999;
background: #111111;
height: 0px;
overflow: hidden;
min-width: 100%;
-webkit-transition: opacity 0.4s ease-out;
-moz-transition: opacity 0.4s ease-out;
-o-transition: opacity 0.4s ease-out;
-ms-transition: opacity 0.4s ease-out;
transition: opacity 0.4s ease-out;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
}
nav.primary ul li:hover ul
{
opacity: 10;
filter: alpha(opacity=100);
height: auto;
overflow: auto;
}
nav.primary ul ul li
{
float: none;
display: list-item;
border-bottom: 1px solid #747474;
}
nav.primary ul ul li a
{
display: block;
margin-left: 10px;
line-height: 40px;
font-size: 0.8em;
/*text-transform: none;*/
font-family: 'LibbyRegular', Helvetica, Arial, sans-serif;
}
Menu HTML
<ul>
<li>independent work
<ul>
<li>>> big and ugly</li>
<li>>> iceworld</li>
<li>>> gordon's got game</li>
</ul>
</li>
<li>team projects
<ul>
<li>>> blastrobots</li>
<li>>> ruined</li>
</ul>
</li>
<li>scripting
<ul>
<li>>> hero man (C#)</li>
<li>>> CloneOut (lua)</li>
<li>>> shotgun (unrealscript)</li>
</ul>
</li>
<li>resume</li>
</ul>
The site is http://lvsherman.com if you would like to test it.

Answer 1

Try adding to your inner UL elements.
left: 0;
top: WHATEVER;