Пример выпадающего меню, где дочерние элементы центрированы. Реализация очень проста. Пишем на html  простой  маркированный список, состоящий из двух уровней.

<ul id="nav">
                <li class="current"><a href="#">HOME</a></li>
                <li><a href="#">NEWS</a>
                    <ul>
                        <li><a href="#">Sub-Menu 1</a></li>
                        <li><a href="#">Sub-Menu 2</a></li>
                        <li><a href="#">Sub-Menu 3</a></li>
                    </ul>
                </li>
                <li><a href="#">TUTORIALS</a>
                    <ul>
                        <li><a href="#">Sub-Menu 1</a></li>
                        <li><a href="#">Sub-Menu 2</a></li>
                        <li><a href="#">Sub-Menu 3</a></li>
                    </ul>
                </li>
                <li><a href="#">BLOG</a>
                    <ul>
                        <li><a href="#">Sub-Menu 1</a></li>
                        <li><a href="#">Sub-Menu 2</a></li>
                        <li><a href="#">Sub-Menu 3</a></li>
                    </ul>
                </li>
                <li><a href="#">PORTFOLIO</a>
                    <ul>
                        <li><a href="#">Sub-Menu 1</a></li>
                        <li><a href="#">Sub-Menu 2</a></li>
                        <li><a href="#">Sub-Menu 3</a></li>
                    </ul>
                </li>
          </ul>

В моём примере возможны только два уровня. Стилизуем css:

1ul li {
    list-style: none;
} 
/*nav*/
#nav li {
    position:relative; 
    float: left
    }
#nav a {
    float:left; 
    margin: 0 30px 0 0; 
    padding: 5px 0 15px; 
    font-size:20px; 
    color: #9F8F79; 
    text-decoration:none
    }
#nav a:hover {
    color: #9F8F79
    }
    /*dropdown*/
ul#nav ul {
    display:none; 
    position:absolute; 
    top:36px; 
    left: 0; 
    padding: 6px 0 0; 
    background:#f4f4f4 url(triangle.jpg) no-repeat 50% 0; 
    border-top: 3px solid #1bba9b;
    border-bottom: 1px solid #d3d2d2;
    z-index:100;
    border-right: 1px solid #d3d2d2;
            border-left: 1px solid #d3d2d2;
    }
ul#nav ul li {
    float: none; 
    display: block; 
    background: #f4f4f4;
    border-bottom: 1px solid #d3d2d2; 
              }
ul#nav ul li:first-child {
    border-top: none;
         
            }
ul#nav ul li a {
    float: none; 
    display:block; 
    width: 148px;
    margin:0; 
    padding: 5px 20px; 
    background: #f4f4f4
                }
 
ul#nav li:hover ul, ul#nav li:focus ul {display: block} 

Итак, обычное выпадающее меню готово, осталось только рассчитать ширину родительского элемента, поделить на двое, и сместить дочерний на полученное значение. В этом поможет небольшой скриптик.

$(document).ready(function() {
        $("ul#nav li").mouseover(function() {
            var the_width = $(this).find("a").width();
            var child_width = $(this).find("ul").width();
            var width = parseInt((child_width - the_width)/2);
            $(this).find("ul").css('left', -width);
          });
         });

И что бы скриптик заработал, подключим JQUERY 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Всё, выпадающее с меню центрированными дочерними элементами готово.

Демо