Problema para ubicar navegación postion:absolute

[Faks]

Logre alinear la sub-nav en todos los exploradores. No logre que Firefox me respete el tamaño de la tipografía.
Como por el momento lo considero un problema menor, lo pasare por alto hasta que me de problemas.

La alineación la logre con jQuery sacada de un tutorial que dejo al final de la respuesta.
El código quedo de la siguiente manera (para el que ande con problema similar):

El script

Código Javascript:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
         
         $("ul#top-nav li").hover(function() { //Hover over event on list item
          $(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color and image on hovered list item
          $(this).find("span").show(); //Show the subnav
         } , function() { //on hover out...
          $(this).css({ 'background' : 'none'}); //Ditch the background
          $(this).find("span").hide(); //Hide the subnav
         });
         
        });
    </script>
 

HTML

Código HTML:

<nav id="top-nav">
                <ul>
                    <li><a href="#" class="active">Noticias</a></li>
                    <li><a href="#">Roster</a>
                        <span>
                            <a href="#">Battlefield</a>
                            <a href="#">Counter Strike</a>
                            <a href="#">Dota</a>
                            <a href="#">Leage of Legends</a>
                            <a href="#">War Thunder</a>
                        </span>
                    </li>
                    <li><a href="#">Cerrados</a>
                        <span>
                            <a href="#">Jugados</a>
                            <a href="#">Proximos</a>
                        </span>
                    </li>
                    <li><a href="#">Torneos</a></li>
                    <li><a href="#">Servidores</a>
                        <span>
                            <a href="#">Team Speak 3</a>
                            <a href="#">Battlefield 4</a>
                        </span>
                    </li>
                    <li><a href="#">Multimedia</a>
                        <span>
                            <a href="#">Fotos</a>
                            <a href="#">Videos</a>
                            <a href="#">Screenshots</a>
                        </span>
                    </li>
                    <li><a href="#">Foro</a></li>
                    <li><a href="#">Contacto</a></li>
                </ul>
            </nav><!-- fin top-nav -->
 

CSS

Código CSS:

/* NAVEGACION */
 
#top-nav {
    height: 81px;
    width: 100%;
    background: url('../img/nav-bg.png') repeat-x;
}
 
#top-nav ul {
    padding-left: 5px;
    font-size: 0.9em;
    text-transform: uppercase;
    position: relative;
}
 
#top-nav ul li {
    padding: 15px;
    float: left;
    padding-right: 20px;
}
 
    #top-nav ul li a {
        color: #fff;
        font-weight: bold;
        text-decoration: none;
    }
 
    #top-nav ul li a:hover {
        color: #2da7e4;
    }
 
#top-nav li span {
    position: absolute;
    float: left;
    height: 30px;
    padding: 20px 15px 15px 10px;
    margin-top: -10px;
    left: 10px;
    top:45px;
    width: 975px;
    display: none;
    z-index: 100;
}
 
    #top-nav li span a {
        padding-right: 20px;
        font-size: 0.833em;
        color: #666666;
    }
 
#top-nav li:hover span { display: block; }
#top-nav li span a:hover { color: #2da7e4;}
 

El enlace al tutorial -> http://www.htmldrive.net/items/show/239/Horizontal-Subnav-w-CSS-jQuery.html