Định tâm menu con ngang dưới đây mẹ với css

Question

nhất hiển thị với một Fiddle: http://jsfiddle.net/Jnttm/

Làm thế nào tôi có thể nhận được các menu con để tập trung bên dưới phụ huynh menu-item? Rất nhiều thủ thuật định tâm mà tôi thấy không áp dụng bởi vì phần tử con là rộng hơn so với phần tử cha.

Điều này có thể thực hiện bằng CSS thuần túy hoặc tôi có phải sử dụng javascript không?
Nếu JS được yêu cầu, có ai có mã JQuery hữu ích để thực hiện việc này không?

Answer 1

Có thể bạn phải xác định một mặc định width-submenu của bạn như thế này:

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

Kiểm tra này http://jsfiddle.net/sandeep/Jnttm/1/

Answer 2

này sẽ tập trung các menu phụ: ul > ul.sub-menu { position: absolute; left: 50%; transform: translateX(-50%) }