html - 居中子菜单 - 不居中

Question

我试图将子菜单置于其父菜单的中央，但我似乎找不到正确的编码。我试过“转换:翻译(-50%，0)；”但它似乎没有任何效果。下面是原始的 css，没有任何试图居中的编码。任何帮助都会很棒!

作为引用，我的元素是 lightertaste.com

.genesis-nav-menu {
	clear: both;
	padding: 0;
	text-align: right;
	white-space: nowrap;
}

.genesis-nav-menu .menu-item {
	display: inline-block;
	white-space: normal;
	margin: 0; padding: 0;
	font-family: 'dosis';
	font-size: 21px;
	font-weight: 400;
	letter-spacing: .5px;
	text-align: left;
}

.genesis-nav-menu a {
	padding: 0px 10px;
	display: block;
	position: relative;
	font-style: normal;
	color: #abc3b7;
	text-decoration: none;
	text-transform: lowercase;
}

.genesis-nav-menu a:hover,
.genesis-nav-menu a:focus,
.genesis-nav-menu .current-menu-item > a,
.genesis-nav-menu .sub-menu .current-menu-item > a:hover,
.genesis-nav-menu .sub-menu .current-menu-item > a:focus {
	color: #585858;
}

/* Sub Navigation
--------------------------------------------- */

.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 #f4f4f4;
}

.genesis-nav-menu .sub-menu .sub-menu:before {
	display: none;
}

.genesis-nav-menu .sub-menu {
	z-index: 2000;
	position: absolute;
	left: -9999px;
	width: 125px;
	border: none;
	opacity: 0;
}

.genesis-nav-menu .sub-menu a {
	position: relative;
	width: 125px;
	background-color: #f4f4f4;
	padding: 10px;
	font-size: 14px;
	color: #6f9985;
	text-align: center;
}

.genesis-nav-menu .sub-menu .sub-menu {
	margin: -41px 0 0 125px;
}

.genesis-nav-menu .menu-item:hover,
.genesis-nav-menu .menu-item:focus,
.genesis-nav-menu .menu-item.menu-item-hover {
	position: static;
}

.genesis-nav-menu .sub-menu a:hover,
.genesis-nav-menu .sub-menu a:focus,
.genesis-nav-menu .sub-menu .current-menu-item > a:hover,
.genesis-nav-menu .sub-menu .current-menu-item > a:focus {
	background: #6f9985;
	color: #ffffff;
}

.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  {
	opacity: 1;
	left: auto;
}

<nav class="nav-header" itemscope itemtype="http://schema.org/SiteNavigationElement"><ul id="menu-top-menu" class="menu genesis-nav-menu"><li id="menu-item-886" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-886"><a href="http://www.lightertaste.com/shop/" itemprop="url"><span itemprop="name">Shop</span></a></li>
<li id="menu-item-885" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-885"><a href="http://www.lightertaste.com/resources/" itemprop="url"><span itemprop="name">Resources</span></a></li>
<li id="menu-item-882" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-882"><a href="http://www.lightertaste.com/contact/" itemprop="url"><span itemprop="name">Contact</span></a>
<ul class="sub-menu">
	<li id="menu-item-887" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-887"><a href="http://www.lightertaste.com/work-with-me/" itemprop="url"><span itemprop="name">Work With Me</span></a></li>
</ul>
</li>
</ul></nav>

Answer 1

尝试添加:

transform: translateX(-1.3em);

以下内容:

    .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 {
        opacity: 1;
        left: auto;
        transform: translateX(-1.3em);
    }