如何通过CSS中心子菜单？

Question

我如何居中对齐Submenu容器，我尝试过margin-left但是失败了。

#moz_page .moz_menu_items ul {
position: absolute;
top: -9999px;
display: block;
width: 220px;
background-color: #F6D9E8;
background: rgba(246,217,232,1);
margin: 0;
padding: 0;
list-style: none;
}

网站网址：http://bvlaserspa.com/beta/

非常感谢任何帮助。

Answer 1

您可以使用左侧移动它：

试试这个

#moz_page .moz_menu_items ul {
position: absolute;
top: -9999px;
display: block;
width: 220px;
background-color: #F6D9E8;
background: rgba(246,217,232,1);
margin: 0;
padding: 0;
list-style: none;

left: -50px; // you can adjust it for your purpose
}

希望它有所帮助。

Answer 2

＆＃13;

＆＃13;

nav#menu {
background-color: #FFFF00;
border-width: 0px 0px 2px 0px;
height: 35px;
}

#menu_inner_in {
width: 100%;
height: 46px;
text-align: center;
position: relative;
margin: 0 auto;
}

.separator
{
border-style: solid; border-width: 0px 27px 17px; 
-moz-border-image: url(http://bvlaserspa.com/beta/wp-content/uploads/2014/12/seperator.png) 0 27 17 repeat; 
-webkit-border-image: url(http://bvlaserspa.com/beta/wp-content/uploads/2014/12/seperator.png) 0 27 17 repeat;
-o-border-image: url(http://bvlaserspa.com/beta/wp-content/uploads/2014/12/seperator.png) 0 27 17 repeat; 
border-image: url(http://bvlaserspa.com/beta/wp-content/uploads/2014/12/seperator.png) 0 27 17 fill repeat;
}

＆＃13;

<nav id="menu">
<div id="menu_inner_in">
<h3 class="menu-toggle">Menu</h3>
<ul>
<li>One</li>
  <hr class="separator">
<li><a href="#">Two</a></li>
  <hr class="separator">
<li><a href="#">Three</a></li>
  <hr class="separator">
<li><a href="#">Et coetera</a></li>
</ul>  
</div>
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 3

子菜单可见时应用的CSS是：

#moz_page .moz_menu_items li:hover ul.child {
    height: auto;
    border-radius: 0px 0px 20px 20px;
    border: 0px solid rgba(255, 255, 255, 0);
    display: block;
    font-size: 0px;
    padding: 0px;
    z-index: 300;
    top: 35px;
    left: 2px;
}

您可以通过调整左侧属性（px或％）来移动菜单，但由于主菜单项的宽度不同，我怀疑您会找到适合所有子菜单的值