1. 首頁
  2. 問答
  3. 居中子菜單（孩子菜單，懸停菜單）

居中子菜單（孩子菜單，懸停菜單）

2016-11-27 147 views
0

請參考我的項目：http://www.lightertaste.com/居中子菜單（孩子菜單，懸停菜單）

如果你看一下主導航（瀏覽的食譜後），每個菜單項有子菜單，但我做不到似乎讓他們完全集中到他們的父母菜單。

任何幫助，將不勝感激！

/* 
 
Site Navigation 
 
----------------------------------------------------------------------------- */ 
 

 
.genesis-nav-menu:before { 
 
\t margin-right: 10px; 
 
\t content: "BROWSE THE RECIPES:"; 
 

 
\t font-family: 'arquitecta-black'; 
 
\t color: #f15c58; 
 
\t font-size: 13px; 
 
\t letter-spacing: 1px; 
 
} 
 

 
.genesis-nav-menu { 
 
\t width: 100%; 
 
\t clear: both; 
 
\t border-top: 1px solid #dcdcdc; 
 
\t border-bottom: 1px solid #dcdcdc; 
 
\t padding: 10px 0px; 
 
\t text-align: center; 
 
} 
 

 
nav.nav-primary div.wrap { 
 
\t border-top: 1px solid #dcdcdc; 
 
\t border-bottom: 1px solid #dcdcdc; 
 
\t padding: 2px 0px; 
 
} 
 

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

 
.genesis-nav-menu a { 
 
\t display: inline-block; 
 
\t position: relative; 
 
\t padding-left: 9px; 
 
\t padding-right: 12px; 
 

 
\t font-family: 'arquitecta-medium'; 
 
\t color: #4a4947; 
 
\t font-size: 13px; 
 
\t letter-spacing: 1px; 
 
\t text-decoration: none; 
 
\t text-transform: uppercase; 
 
} 
 

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

 
.genesis-nav-menu a:hover { 
 
\t color: #f15c58; 
 
} 
 

 
li#menu-item-281, li#menu-item-119, li#menu-item-120, li#menu-item-121, li#menu-item-124 { 
 
\t 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 { 
 
\t display: inline-block; 
 
\t content: "/"; 
 
\t color: #b1b1b1; 
 
} 
 

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

 
.menu-primary li { 
 
\t 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 { 
 
\t left: 50%; 
 
\t transform: translateX(-50%); 
 
} 
 

 
.genesis-nav-menu .sub-menu { 
 
\t position: absolute; 
 
\t left: -9999px; 
 
\t z-index: 2000; 
 
\t width: 200px; 
 
} 
 

 
.genesis-nav-menu .sub-menu:before { 
 
\t content: ''; 
 
\t display: block; 
 
\t margin: auto; 
 
\t width: 0; 
 
\t height: 0; 
 
\t border-left: 10px solid transparent; 
 
\t border-right: 10px solid transparent; 
 
\t border-bottom: 10px solid #4a4947; 
 
} 
 

 
.genesis-nav-menu .sub-menu a { 
 
\t position: relative; 
 
\t width: 200px; 
 
\t padding: 10px; 
 
\t background-color: #4a4947; 
 

 
\t color: #ffffff; 
 
\t font-size: 11px; 
 
\t letter-spacing: 1px; 
 
} 
 

 
.genesis-nav-menu .sub-menu a:hover { 
 
\t 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 &#038; Snacks</span></a> 
 
<ul class="sub-menu"> 
 
\t <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 &#038; Spreads</span></a></li> 
 
\t <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 &#038; Fish</span></a></li> 
 
\t <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 &#038; 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"> 
 
\t <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 &#038; Omelettes</span></a></li> 
 
\t <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 &#038; Waffles</span></a></li> 
 
\t <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 &#038; Granola</span></a></li> 
 
\t <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, &#038; Pastries</span></a></li> 
 
\t <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 &#038; 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"> 
 
\t <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 &#038; Wraps</span></a></li> 
 
\t <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 &#038; Power Bowls</span></a></li> 
 
\t <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 &#038; 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"> 
 
\t <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 &#038; Easy</span></a></li> 
 
\t <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 &#038; Pork</span></a></li> 
 
\t <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 &#038; Poultry</span></a></li> 
 
\t <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 &#038; Shellfish</span></a></li> 
 
\t <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 &#038; One-Pans</span></a></li> 
 
\t <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 &#038; Risottos</span></a></li> 
 
\t <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 &#038; 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"> 
 
\t <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 &#038; Pies</span></a></li> 
 
\t <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 &#038; Brownies</span></a></li> 
 
\t <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 &#038; 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"> 
 
\t <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 &#038; Potatoes</span></a></li> 
 
\t <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 &#038; Noodles</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">Breads &#038; Rolls</span></a></li> 
 
</ul> 
 
</li> 
 
</ul></div></nav>

來源

2016-11-27 Samantha

回答

0

你的子菜單實際上是正確居中，但它看起來是不是因爲分隔符：/菜單/ 如果考慮到在菜單填充，而所有的菜單都爲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%); */ 
}

但是撲滅保證金左：第一個和最後一個元素100像素：

爲此，請使用以下選擇器添加新規則：

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

來源

2016-11-27 18:04:29 didiliche

+0

Thanks！對不起，但我應該如何添加到第一個和最後一個？ – Samantha

+0

似乎我只能讓它工作，如果我刪除分隔符。 – Samantha

+0

請參閱編輯:)使用垂直分隔符的 – didiliche

相關問題

 相關問題