Problema con menu - visualizacion

[bp1905]

Hola a todos, soy nuevo en este foro y en el mundo de la programación web y tengo un problema

Resulta que para empezar me descargue el dreamweaver cs6 y una plantilla de un sitio web que me gusto bantante. Peero, esa plantilla no tenia submenus que es lo que me hacia falta, entonces buscando por la web encontre como agregarlo al codigo en html y en css.

Al principio:
[URL="http://prntscr.com/89c8nm"]http://prntscr.com/89c8nm[/URL]

Luego de agregar el codigo:
[URL="http://prntscr.com/89c8wg"]http://prntscr.com/89c8wg
[/URL]

Ahora el problema era que quedaba corrido hacia el borde de la pantalla pero debia quedar al mismo nivel que el primer boton, entonces hablando con un usuario de otra pagina me dio una solucion, por lo que modifique el css y se solociono parcialmente, porque en google chrome funciona bien pero lo pruebo en internet explorer y se muestra el submenu sobre el menu tapando todo.

En IE (version 9):
[URL="http://prntscr.com/89c9rn"]http://prntscr.com/89c9rn
[/URL]
En Firefox no lo he podido probar..

Código CSS-inicial:

/*********************************************************************************/
/* Menu                                                                          */
/*********************************************************************************/
 
    #menu
    {
    }
    
    #menu ul li
    {
        display: inline-block;
        padding-left: 1.2em; padding-right: 1.3em;
        background: #ff8a0e;
        text-align: center;
    }
    
    #menu li
    {
        display: inline-block;
        float: left;
    }
 
    #menu ul li ul
    {
        display: none; position: absolute;  text-align: center;
    }
    
    #menu ul li ul li
    {
        position: relative;
        display: inline-block;
        left: -382px;
        float: left;
        background: #ff8a0e;
    }
    
    #menu ul li:hover ul
    {
        display: inline-block;
        position: absolute; padding: 0em;
        
    }
    
    #menu li a, #menu li span
    {
        display: inline-block;
        padding: 1em 1em;
        text-decoration: none;
        font-size: 0.9em;
        font-weight: 600;
        text-transform: uppercase;
        outline: 0;
        color: #FFF;
    }
    
    #menu li:hover a, #menu li.active a, #menu li.active span
    {
    }
    
    #menu .current_page_item a
    {
        color: #FFF;
    }
 

Código CSS-final:

/*********************************************************************************/ 
/* Menu */ 
/*********************************************************************************/ 
 
#menu 
{ 
} 
 
#menu ul li 
{ 
display: inline-block; 
padding: 0em; 
background: #ff8a0e; 
text-align: center; 
} 
 
#menu li 
{ 
display: inline-block; 
float: left; 
} 
 
#menu ul li ul li { 
position: relative; 
left: -269px; 
float: left; 
background: #ff8a0e; 
} 
#menu ul li ul 
{ 
display: none; position: absolute; text-align: center; 
} 
#menu ul li:hover ul 
{ 
display: inline-block; 
position: absolute; padding: 0em; 
 
} 
 
#menu li a, #menu li span 
{ 
display: inline-block; 
padding: 1em 1em; 
text-decoration: none; 
font-size: 0.9em; 
font-weight: 600; 
text-transform: uppercase; 
outline: 0; 
color: #FFF; 
} 
 
#menu li:hover a, #menu li.active a, #menu li.active span 
{ 
} 
 
#menu .current_page_item a 
{ 
color: #FFF; 
}
 

Código HTML:

<div id="menu">
                <ul>
                    <li class="current_page_item"><a href="http://www.melancor.com.ar/index" accesskey="1" title="">Homepage</a></li>
                    <li><a href="http://www.melancor.com.ar/nosotros" accesskey="2" title="">Nosotros</a></li>
                    <li><a href="http://www.melancor.com.ar/Trabajos" accesskey="3" title="">Trabajos</a>
                        <ul>
                            <li><a href="http://www.melancor.com.ar/cocina" accesskey="5" title="">Cocina</a></li>
                            <li><a href="http://www.melancor.com.ar/dormitorio" accesskey="6" title="">Dormitorio</a></li>
                            <li><a href="http://www.melancor.com.ar/oficinayliving" accesskey="7" title="">Oficina y Living</a></li>
                            <li><a href="http://www.melancor.com.ar/marmoles" accesskey="8" title="">Mesadas</a></li>
                            <li><a href="http://www.melancor.com.ar/baño" accesskey="9" title="">Baño</a></li>
                            <li><a href="http://www.melancor.com.ar/quincho" accesskey="10" title="">Quincho</a></li>
                            <li><a href="http://www.melancor.com.ar/negocio" accesskey="11" title="">Negocio</a></li>
                            </ul>
                    </li>
                    <li><a href="http://www.melancor.com.ar/contacto" accesskey="4" title="">Contacto</a></li>
                </ul>
            </div>
 

Primero queria saber si a ustedes les pasa lo mismo con mi codigo o si se les ve bien.

Si sucede lo mismo, podrian alguien decirme como solucionarlo?

Saludos y gracias de antemano..!

[AngelKrak]

lo subi a Codepen y conmigo se vee "bien" por asi decirlo jejeje, no le veo ningun error >_< podrias decir cual es tu error o mas bien que es lo que quieres exactamente?

http://codepen.io/AngelKrak/pen/EVYKKe

[bp1905]

lo que sucede es que el submenu aparece "desfasado" digamos, quiero que al pasar el mouse por encima, el submenu arranque a la misma "altura" que el menu pero por debajo sin que se superponga..
en algunas pc con google chrome lo veo bien, pero en otras no..
y con internet explorer en ninguna pc funciona bien, al igual que con firefox que lo probe hace unos minutos.

si no se puede arreglar de esa manera lo podria hacer que aparezca un listado vertical.. pero no se como cambiar el codigo para lograrlo