css - 父菜单下的中心子菜单(WordPress > Genesis > Foodie Pro)

Question

我试图在主导航栏中将我的子菜单项置于其父菜单项下方。我已经尝试了一百万种方法，但似乎没有任何效果。

如果有人感兴趣，我正在使用父主题“Genesis”和子主题“Foodie Pro”在 WordPress 网站上执行此操作。

我的站点 URL 是 http://www.livingthelighterlife.com/(请注意，相关菜单以文本“浏览食谱”开头。)

这是我当前菜单的代码:

/* Main Navigation
--------------------------------------------- */

.genesis-nav-menu .menu-item {
    display: inline-block;
}

.genesis-nav-menu {
    margin-top: -118px;
}

.genesis-nav-menu:before {
    content: "BROWSE RECIPES:";
    color: #f68364;
    font-size: 11px;
    letter-spacing: 1px;
    margin-right: 5px;
}

.genesis-nav-menu {
    text-align: right;
    font-size: 11px;
    letter-spacing: 1px;
}

.genesis-nav-menu a {
    display: inline-block;
    position: relative;
    padding-left: 5px;
    padding-right: 8px;
    color: #636367;
    text-decoration: none;
    text-transform: uppercase;
}

.genesis-nav-menu a:hover {
    color: #6dbea2;
}

li#menu-item-150 a {
    pointer-events: none;
    cursor: default;
    padding-left: 2px;
    padding-right: 5px;
    color: #f68364;
}

.menu-item:last-child a {
    padding-right: 0px;
}


li#menu-item-119:after, li#menu-item-120:after, li#menu-item-121:after {
    display: inline-block;
    content: "/";
    color: #b9b9b9;
}

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

.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: auto;
}

.genesis-nav-menu .sub-menu:before {
    content: '';
    display: block;
    margin: auto;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #7b7c80;
}

.genesis-nav-menu .sub-menu {
    position: absolute;
    display: block;
    z-index: 2000;
    left: -9999px;
    width: 100px;
}

.genesis-nav-menu .sub-menu li {
    margin-left: -50px;
    left: 50%;
}

.genesis-nav-menu .sub-menu a {
    width: 100px;
    padding: 10px;
    background-color: #7b7c80;
    color: #ffffff;
    font-size: 10px;
    text-align: center;
}

.genesis-nav-menu .sub-menu a:hover {
    background-color: #f78f73;
}

<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-119" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-119"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Breakfast</span></a></li>
<li id="menu-item-120" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-120"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Lunch</span></a></li>
<li id="menu-item-121" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-121"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Dinner</span></a></li>
<li id="menu-item-148" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-148"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Other</span></a>
<ul class="sub-menu">
	<li id="menu-item-124" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-124"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Desserts</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">Snacks</span></a></li>
	<li id="menu-item-123" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-123"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Sides</span></a></li>
	<li id="menu-item-125" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-125"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Beverages</span></a></li>
</ul>
</li>
<li id="menu-item-150" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-150"><a itemprop="url"><span itemprop="name">•</span></a></li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-25"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Nutrition &#038; Fitness</span></a>
<ul class="sub-menu">
	<li id="menu-item-126" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-126"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Philosophy</span></a></li>
	<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Workouts</span></a></li>
</ul>
</li>
</ul></div></nav>

Answer 1

我认为你必须编辑你的 css 添加一些规则。

1 - 添加相对位置到你的菜单 li

.menu-primary li{
   position: relative;
}

2 - 更改子菜单打开时的行为，将其居中

.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%);
}