请参阅我的项目：http://www.lightertaste.com/
如果您查看主导航（浏览食谱之后），每个菜单项都有一个子菜单，但我似乎无法将它们完全置于其父菜单的中心位置。
任何帮助将不胜感激！
/*
Site Navigation
----------------------------------------------------------------------------- */
.genesis-nav-menu:before {
margin-right: 10px;
content: "BROWSE THE RECIPES:";
font-family: 'arquitecta-black';
color: #f15c58;
font-size: 13px;
letter-spacing: 1px;
}
.genesis-nav-menu {
width: 100%;
clear: both;
border-top: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc;
padding: 10px 0px;
text-align: center;
}
nav.nav-primary div.wrap {
border-top: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc;
padding: 2px 0px;
}
.genesis-nav-menu .menu-item {
display: inline-block;
}
.genesis-nav-menu a {
display: inline-block;
position: relative;
padding-left: 9px;
padding-right: 12px;
font-family: 'arquitecta-medium';
color: #4a4947;
font-size: 13px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
}
.menu-item:last-child a {
padding-right: 0px;
}
.genesis-nav-menu a:hover {
color: #f15c58;
}
li#menu-item-281, li#menu-item-119, li#menu-item-120, li#menu-item-121, li#menu-item-124 {
padding-right: 4px;
}
li#menu-item-281:after, li#menu-item-119:after, li#menu-item-120:after, li#menu-item-121:after, li#menu-item-124:after {
display: inline-block;
content: "/";
color: #b1b1b1;
}
/* Sub Navigation
--------------------------------------------- */
.menu-primary li {
position: relative;
}
.genesis-nav-menu .menu-item:hover > .sub-menu,
.genesis-nav-menu .menu-item:focus > .sub-menu,
.genesis-nav-menu .menu-item.menu-item-hover > .sub-menu {
left: 50%;
transform: translateX(-50%);
}
.genesis-nav-menu .sub-menu {
position: absolute;
left: -9999px;
z-index: 2000;
width: 200px;
}
.genesis-nav-menu .sub-menu:before {
content: '';
display: block;
margin: auto;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #4a4947;
}
.genesis-nav-menu .sub-menu a {
position: relative;
width: 200px;
padding: 10px;
background-color: #4a4947;
color: #ffffff;
font-size: 11px;
letter-spacing: 1px;
}
.genesis-nav-menu .sub-menu a:hover {
background-color: #f15c58;
}<h2 class="screen-reader-text">Main navigation</h2><nav class="nav-primary" itemscope itemtype="http://schema.org/SiteNavigationElement" id="genesis-nav-primary" aria-label="Main navigation"><div class="wrap"><ul id="menu-main" class="menu genesis-nav-menu menu-primary"><li id="menu-item-281" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-281"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Appetizers & Snacks</span></a>
<ul class="sub-menu">
<li id="menu-item-297" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-297"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Dips & Spreads</span></a></li>
<li id="menu-item-389" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-389"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Meat & Fish</span></a></li>
<li id="menu-item-390" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-390"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Fruits & Vegetables</span></a></li>
</ul>
</li>
<li id="menu-item-119" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-119"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Breakfast</span></a>
<ul class="sub-menu">
<li id="menu-item-299" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-299"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Eggs & Omelettes</span></a></li>
<li id="menu-item-298" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-298"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Pancakes & Waffles</span></a></li>
<li id="menu-item-260" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-260"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Oatmeal & Granola</span></a></li>
<li id="menu-item-259" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-259"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Breads, Muffins, & Pastries</span></a></li>
<li id="menu-item-261" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-261"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Shakes & Smoothies</span></a></li>
</ul>
</li>
<li id="menu-item-120" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-120"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Lunch</span></a>
<ul class="sub-menu">
<li id="menu-item-258" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-258"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Sandwiches & Wraps</span></a></li>
<li id="menu-item-262" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-262"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Salads & Power Bowls</span></a></li>
<li id="menu-item-263" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-263"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Soups & Stews</span></a></li>
</ul>
</li>
<li id="menu-item-121" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-121"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Dinner</span></a>
<ul class="sub-menu">
<li id="menu-item-279" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-279"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Quick & Easy</span></a></li>
<li id="menu-item-278" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-278"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Beef & Pork</span></a></li>
<li id="menu-item-276" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-276"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Chicken & Poultry</span></a></li>
<li id="menu-item-277" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-277"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Seafood & Shellfish</span></a></li>
<li id="menu-item-273" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-273"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Casseroles & One-Pans</span></a></li>
<li id="menu-item-274" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-274"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Pastas & Risottos</span></a></li>
<li id="menu-item-275" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-275"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Pizzas & Flatbreads</span></a></li>
</ul>
</li>
<li id="menu-item-124" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-124"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Desserts</span></a>
<ul class="sub-menu">
<li id="menu-item-264" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-264"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Cakes & Pies</span></a></li>
<li id="menu-item-265" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-265"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Cookies & Brownies</span></a></li>
<li id="menu-item-288" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-288"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Ice Creams & Sorbets</span></a></li>
</ul>
</li>
<li id="menu-item-123" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-123"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Sides</span></a>
<ul class="sub-menu">
<li id="menu-item-392" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-392"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Vegetables & Potatoes</span></a></li>
<li id="menu-item-391" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-391"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Rice & Noodles</span></a></li>
<li id="menu-item-122" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-122"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Breads & Rolls</span></a></li>
</ul>
</li>
</ul></div></nav>
答案 0 :(得分：0)
您的子菜单实际上是正确居中的，但由于分隔符，它看起来似乎不是：/ menu / 如果您考虑菜单周围的填充，并且所有菜单都是200px宽，您可以使用：
.genesis-nav-menu .menu-item:hover > .sub-menu,
.genesis-nav-menu .menu-item:focus > .sub-menu,
.genesis-nav-menu .menu-item.menu-item-hover > .sub-menu {
left: 50%;
margin-left: -110px;
/* instead of
transform: translateX(-50%); */
}
但是douse margin-left：第一个和最后一个元素是100px：
为此，请使用以下选择器添加新规则：
.genesis-nav-menu .menu-item:hover > .sub-menu:first-child,
.genesis-nav-menu .menu-item:hover > .sub-menu:last-child,
.genesis-nav-menu .menu-item:focus > .sub-menu:first-child,
.genesis-nav-menu .menu-item:focus > .sub-menu:last-child,
.genesis-nav-menu .menu-item.menu-item-hover > .sub-menu:first-childfor,
.genesis-nav-menu .menu-item.menu-item-hover > .sub-menu:last-child {
left: 50%;
margin-left: -100px;
}