Центрирование UL-меню неизвестной ширины, проблемы переполнения

Question

Я создал упрощенную демонстрацию того, чего я хочу добиться, но в основном, когда я изменяю размер (уменьшаю), я получаю полосы прокрутки, которые я хотел бы удалить.

Добавление переполнения: скрытый для элемента nav работает... пока я не хочу добавлять в подменю.

http://jsfiddle.net/aKUAP/

HTML

<nav>
    <ul>
        <li><a href="#">Menu Item</a></li>
        <li><a href="#">Menu Item</a></li>
        <li><a href="#">Menu Item</a></li>
        <li><a href="#">Menu Item</a></li>
    </ul>
</nav>
<p>Looking for a way to hide the scrollbars created when the page is resized smaller. Using overflow:hidden on the nav element will hide any sub-menus used downt he line.</p>

CSS

nav {
    position: relative;
    zoom: 1;    
    border-top: 1px solid #ccc;
    border-bottom: 3px solid #ccc;    
    float: left;
    width: 100%;
    /*overflow: hidden; */
}
ul {
    clear: left;
    float: left;
    position: relative;
    left: 50%;
    text-align: center;
}
ul li {
    float: left;
    position: relative;
    right: 50%;
}
ul a {
    padding: 5px;
    font-size: 11px;
    display: block;   
}
p {
    text-align: center;
    padding: 30px;
}

Может быть, есть лучшая техника для центрирования UL-меню из неизвестных элементов на ширине 100%?

Answer 1

Вы можете переключиться на использование overflow-x: hidden: http://jsfiddle.net/aKUAP/2/

Может быть, есть лучшая техника для центрирования UL-меню неизвестного элементы шириной 100%?

Да, есть. Переключитесь на display: inline-block на ul и text-align: center на nav: http://jsfiddle.net/aKUAP/3/