Главное подменю под родительским меню (WordPress> Genesis> Foodie Pro)

Question

Я пытаюсь центрировать свои подменю под их родительским пунктом меню в моей основной панели навигации. Я пробовал миллион вещей и ничего не работает.

В случае, если кто-либо заинтересован, я делаю это на сайте WordPress, используя родительскую тему «Genesis» и «Childie Pro Foodie Pro».

Мой сайт 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"> 
 
\t <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> 
 
\t <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> 
 
\t <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> 
 
\t <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"> 
 
\t <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> 
 
\t <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%); 
}