Как центрировать вертикальное выпадающее меню

Question

Я работаю над новым сайтом сайта Wordpress и сталкиваюсь с проблемой CSS с выпадающими меню. В настоящее время они выровнены по левому краю в главном меню или в главном меню. Я предпочитаю, чтобы они были сосредоточены в главном меню или в главном меню.

Вот ссылка на сайт в разработке: http://centraltexasdistrict.com/welcome/

Вот ссылка на изображение, которое дает представление о том, что я ищу или пытается достичь: http://centraltexasdistrict.com/wp-content/uploads/CTD-menu.jpg

Вот текущий CSS Я работаю с:

.menu-main-container { 
    margin-left: auto; 
    margin-right: auto; 
    width: 690px; 
    padding: 0 0 0 20px; 
    height: 35px; 
    z-index: 10; 
    line-height: 35px; 
    } 

    .menu-main-menu-container ul li ul{ text-align:center; } 

    .main-navigation { 
    clear: both; 
    margin: 0 auto; 
    max-width: 1080px; 
    min-height: 36px; 
    position: relative; 
    } 

    #navbar { 
    display: block; 
    height: 36px; 
    width: 100%; 
    margin-top: -27px; 
    z-index: 10; 
    position: absolute; 
    } 

    #site-navigation { 
    padding: 0px; 
    height: 30px; 
    z-index: 10; 
    line-height: 30px; 
    float: left;   
    } 

    ul.nav-menu, 
    div.nav-menu > ul { 
    margin: 0; 
    padding: 0px; 
    } 

    .nav-menu li { 
    display: inline-block; 
    position: relative; 
    } 

    .nav-menu li a { 
    display: block; 
    font-family: 'Lato', sans-serif; 
    line-height: 30px; 
    color: #aaaaaa; 
    font-weight: 400; 
    text-align: center; 
    text-transform:uppercase; 
    text-decoration: none; 
    letter-spacing: 1px; 
    float: left; 
    font-size: 12px; 
    padding: 30px 7px 0px 7px; 
    margin-bottom: 5px; 
    } 

    .nav-menu li:hover > a, 
    .nav-menu li a:hover, 
    .nav-menu li:focus > a, 
    .nav-menu li a:focus { 
    color: #ffffff; 
    background-color: #353535; 
    } 

    .nav-menu .sub-menu, 
    .nav-menu .children { 
    background-color: #e07726; 
    padding: 0px; 
    position: absolute; 
    z-index: 99999; 
    overflow: hidden; 
    clip: rect(1px, 1px, 1px, 1px); 
    margin-top: 65px; 
    } 

    .nav-menu .sub-menu ul, 
    .nav-menu .children ul { 
    border-left: 0; 
    left: 100%; 
    top: 0; 
    } 

    .sub-menu { 
    text-align: center; 
    width: 100%; 
    left: auto; 
    }  

    .sub-menu li { 
    display: inline-block; 
    width: auto; 
    padding: 0px; 
    } 

    .sub-menu li a { 
    display: block; 
    height: 24px; 
    font-family: 'Lato', sans-serif; 
    line-height: 24px; 
    font-weight: 400; 
    text-align: left; 
    text-decoration: none; 
    text-transform: none; 
    letter-spacing: 1px; 
    float: left; 
    font-size: 11px; 
    padding: 2px 10px 2px 10px; 
    color: #ffffff; 
    white-space: nowrap; 
    } 

    .sub-menu li:hover > a, 
    .sub-menu li a:hover, 
    .sub-menu li:focus > a, 
    .sub-menu li a:focus { 
    background-image: none; 
    color: #ac5411; 
    background-color: transparent; 
    } 

    ul.nav-menu ul a, 
    .nav-menu ul ul a { 
    color: #fff; 
    margin: 0; 
    } 

    ul.nav-menu li:hover > ul, 
    .nav-menu ul li:hover > ul, 
    ul.nav-menu .focus > ul, 
    .nav-menu .focus > ul { 
    clip: inherit; 
    overflow: inherit; 
    height: inherit; 
    width: inherit; 
    } 

    .nav-menu .current_page_item > a, 
    .nav-menu .current_page_ancestor > a, 
    .nav-menu .current-menu-item > a, 
    .nav-menu .current-menu-ancestor > a { 
    color: /* #333333 */; 
    } 

Answer 1

Быстрое решение может быть дать в подменю заданную ширину:

ul.nav-menu li:hover > ul, .nav-menu ul li:hover > ul, ul.nav-menu .focus > ul, .nav-menu .focus > ul { 
    clip: inherit; 
    overflow: inherit; 
    height: inherit; 
    width: 200px; /* width for the submenu */ 
    left: 50%; /* position it 50% to the left */ 
    margin-left: -100px; /* negative margin half of with to center it */ 
} 

Или использовать перевод, если вы не хотите иметь заданную ширину (не для всех старых браузеров и вам может понадобиться некоторые префиксы):

ul.nav-menu li:hover > ul, .nav-menu ul li:hover > ul, ul.nav-menu .focus > ul, .nav-menu .focus > ul { 
    clip: inherit; 
    overflow: inherit; 
    height: inherit; 
    transform: translate(-50%, 0); 
    left: 50%; 
} 

Answer 2

.menu-main-menu-container ul li ul{ 
text-align:center; 
} 

Добавьте приведенный выше код в таблицу стилей для центрирования выпадающего списка меню