centraggio sottomenu orizzontale sotto genitore con css

Question

meglio mostrato con un violino: http://jsfiddle.net/Jnttm/

Come posso ottenere il sottomenu per centrare sotto il menu-item genitore? Molti trucchi di centraggio che ho trovato non si applicano perché l'elemento figlio è più largo del genitore.

Questo è possibile con CSS puro o devo ricorrere a javascript?
Se JS è richiesto qualcuno ha a disposizione un codice JQuery per farlo?

Answer 1

Può essere è necessario definire un default width al submenu in questo modo:

.sub-menu { 
    display: none; 
    position: absolute; 
    top: 20px; 
    left: 0; 
    white-space: nowrap; 
    text-align:center; 
    left:50%; 
    margin-left:-150px; 
    width:300px; 
} 
.active .sub-menu { 
    display:block; 
} 

Scegli questa http://jsfiddle.net/sandeep/Jnttm/1/

Answer 2

Questo centrerà sotto menu: ul > ul.sub-menu { position: absolute; left: 50%; transform: translateX(-50%) }