将子菜单CSS和HTML居中

Question

我的中心子菜单有问题。菜单和子菜单应该居中。 请帮我集中我的子菜单。

预览：here

HTML

<nav role="navigation" id="access">
    <div class="menu-menuu-container">
        <ul class="menu" id="menu-menuu">
            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-180" id="menu-item-180"><a href="">Start</a>
            </li>
            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-183" id="menu-item-183"><a href="">O nas</a>

                <ul class="sub-menu">
                    <li class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-page-parent menu-item-458" id="menu-item-458"><a href="">Camera Nera</a>
                    </li>
                    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-500" id="menu-item-500"><a href="">Zespół</a>
                    </li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-449" id="menu-item-449"><a href="">Partnerzy</a>
                    </li>
                </ul>
            </li>
            <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-424" id="menu-item-424"><a href="">Portfolio</a>

                <ul class="sub-menu">
                    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-182" id="menu-item-182"><a href="">Filmy</a>
                    </li>
                    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-495" id="menu-item-495"><a href="">Teledyski</a>
                    </li>
                    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-496" id="menu-item-496"><a href="">Video-Art</a>
                    </li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-15 current_page_item menu-item-499" id="menu-item-499"><a href="">Komercyjne</a>
                    </li>
                </ul>
            </li>
            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-494" id="menu-item-494"><a href="">Blog</a>
            </li>
            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-422" id="menu-item-422"><a href="">Kontakt</a>
            </li>
        </ul>
    </div>
</nav>

CSS

#access {
    clear: both;
    display: block;
    float: left;
    width: 100%;
}
#access ul {
    list-style: none;
    padding-left: 0;
}
#access li {
    float: left;
    position: relative;
    margin: 0 60px 0 0;
}
#access li:last-child {
    margin: 0 !important;
}
#access a {
    border-bottom: 0 none;
    color: #000000;
    font-family:'Dosis', sans-serif;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 48px;
    outline: medium none;
    text-transform: uppercase;
    transition: all 0.4s ease-in-out 0s;
    white-space: nowrap;
    text-decoration: none;
    float: left;
}
#access ul ul {
    display: none;
    float: left;
    margin: 0;
    position: absolute;
    top: 48px;
    left: 0;
    width: 188px;
    z-index: 99999;
}
#access {
    padding: 0px;
    margin-bottom: 40px;
    border-bottom: 0px !important;
}
#access {
    position: relative;
    margin-left: 0px;
}
#access li .sub-menu {
    position: absolute;
    border: 0px;
    border-width: 0;
    height: 48px;
}
#access li .sub-menu li {
    border-top: 0px solid white;
    border-bottom: 0px;
}
#access li .sub-menu li a {
    width: auto;
    color: #000000;
    font-size: 16px;
    line-height: 48px;
}
#access a {
    position: static;
    text-transform: uppercase;
    background:#fff;
    border: 0px;
    line-height: 48px;
}
#access .sf-sub-indicator {
    display: none;
}
#access a, #access li.current_page_item, #access li.current_page_parent, #access li.current-menu-ancestor, #access li.current-menu-item, #access li.sfHover, #access li.selected {
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
}
#access li .sub-menu li a {
    border: 1px solid #fff !important;
    line-height: 48px;
}
#access li .sub-menu {
    position: absolute;
    left: 0;
    width: 480px;
    border: 0px;
    border-width: 0;
    height: 48px;
}
#access li.current-menu-item a, #access li.current-menu-parent a {
    color: #000000;
}
#access li.current-menu-parent .sub-menu a {
    color:#000000;
}
#access li.current-menu-parent .sub-menu li.current-menu-item a, #access li.current-menu-parent .sub-menu li.current-menu-parent a {
    color: #000000;
}
#access li.current-menu-item .sub-menu, #access li.current-menu-parent .sub-menu {
    top: 48px;
    left: 0;
}
#access li.current-menu-item .sub-menu, #access li.current-menu-parent .sub-menu {
    visibility: visible !important;
    display: block !important;
}
#access:hover li.current-menu-item .sub-menu, #access:hover li.current-menu-parent .sub-menu {
    visibility: hidden !important;
    display: none !important;
}
#access li.current-menu-item:hover .sub-menu, #access li.current-menu-parent:hover .sub-menu {
    visibility: visible !important;
    display: block !important;
}
.menu-menuu-container {
    display: table;
    /* Allow the centering to work */
    margin: 0 auto;
}
#access ul ul a {
    border-bottom: 0 none;
    color: #000000;
    font-family:'Dosis', sans-serif;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 48px;
    text-transform: uppercase;
    transition: all 0.4s ease-in-out 0s;
    white-space: nowrap;
}
#access li:hover > a, #access a:focus {
    color: #000000;
}
#access ul li:hover > ul {
    display: block;
}

Answer 1

从父级li（第一级菜单）元素中删除position: relative。这将允许左边相对于全宽导航。

在.sub-menu上将以下属性更改为：

width: 100%;
text-align: center;

添加到#access li .sub-menu li：

float: none; //changed from float: left
display: inline-block;

<强> DEMO