父菜单下的中心子菜单

时间：2016-12-04 23:34:18

标签： wordpress

项目：lightertaste.com

尝试将子菜单项置于主导航栏中的父菜单项下。每个之前的向上箭头以及菜单本身应完全以其父菜单文本为中心。

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

.genesis-nav-menu {
	clear: both;
	text-align: right;
}

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

.genesis-nav-menu a {
	display: inline-block;
	position: relative;
	padding: 0px 10px;

	font-family: 'dosis-regular';
	color: #3d4646 !important;
	font-size: 21px;
	letter-spacing: 1px;
	font-weight: 500;
	text-decoration: none;
	text-transform: lowercase;
}

.genesis-nav-menu a:hover {
	color: #68a29c !important;
}

/* 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: auto;

}

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

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

.genesis-nav-menu .sub-menu a {
	width: 150px;
	padding: 10px;
	background-color: #3d4646;
	color: #ffffff !important;
	font-size: 12px;
	font-weight: normal! important;
	text-align: center;
}

.genesis-nav-menu .sub-menu a:hover {
	background-color: #68a29c;
	color: #3d4646 !important;
}
<section id="nav_menu-2" class="widget widget_nav_menu"><div class="widget-wrap"><nav class="nav-header" itemscope itemtype="http://schema.org/SiteNavigationElement"><ul id="menu-main" class="menu genesis-nav-menu"><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.lightertaste.com/sample-page/" itemprop="url"><span itemprop="name">Appetizers &#038; 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.lightertaste.com/sample-page/" itemprop="url"><span itemprop="name">Dips &#038; 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.lightertaste.com/sample-page/" itemprop="url"><span itemprop="name">Meat &#038; 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.lightertaste.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.lightertaste.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.lightertaste.com/sample-page/" itemprop="url"><span itemprop="name">Eggs &#038; 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.lightertaste.com/sample-page/" itemprop="url"><span itemprop="name">Pancakes &#038; 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.lightertaste.com/sample-page/" itemprop="url"><span itemprop="name">Oatmeal &#038; 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.lightertaste.com/sample-page/" itemprop="url"><span itemprop="name">Breads, Muffins, &#038; 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.lightertaste.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.lightertaste.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.lightertaste.com/sample-page/" itemprop="url"><span itemprop="name">Sandwiches &#038; 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.lightertaste.com/sample-page/" itemprop="url"><span itemprop="name">Salads &#038; 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.lightertaste.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.lightertaste.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.lightertaste.com/sample-page/" itemprop="url"><span itemprop="name">Quick &#038; 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.lightertaste.com/sample-page/" itemprop="url"><span itemprop="name">Beef &#038; 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.lightertaste.com/sample-page/" itemprop="url"><span itemprop="name">Chicken &#038; 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.lightertaste.com/sample-page/" itemprop="url"><span itemprop="name">Seafood &#038; 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.lightertaste.com/sample-page/" itemprop="url"><span itemprop="name">Casseroles &#038; 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.lightertaste.com/sample-page/" itemprop="url"><span itemprop="name">Pastas &#038; 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.lightertaste.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.lightertaste.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.lightertaste.com/sample-page/" itemprop="url"><span itemprop="name">Cakes &#038; 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.lightertaste.com/sample-page/" itemprop="url"><span itemprop="name">Cookies &#038; 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.lightertaste.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.lightertaste.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.lightertaste.com/sample-page/" itemprop="url"><span itemprop="name">Vegetables &#038; 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.lightertaste.com/sample-page/" itemprop="url"><span itemprop="name">Rice &#038; 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.lightertaste.com/sample-page/" itemprop="url"><span itemprop="name">Breads &#038; Rolls</span></a></li>
</ul>
</li>
</ul></nav></div></section>

0 个答案:

没有答案
相关问题
最新问题