CSSで親下の水平サブメニューを中心に

Question

ベストフィドルを示す：http://jsfiddle.net/Jnttm/

は、どのように私はサブメニューが親メニュー項目の下中央に得ることができますか？子要素が親よりも広いので、私が見つけた中心的なトリックの多くは適用されません。

これは純粋なCSSで可能ですか、またはJavaScriptに頼らなければなりませんか？
JSが必要な場合は誰でもこれを行うのに便利なJQueryコードを持っていますか？

Answer 1

は、あなたがこのようなあなたのsubmenuにデフォルトwidthを定義する必要があることがある：

.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; 
} 

チェックこのhttp://jsfiddle.net/sandeep/Jnttm/1/

Answer 2

これは、サブメニューを中心に説明する： ul > ul.sub-menu { position: absolute; left: 50%; transform: translateX(-50%) }