我正在尝试为Wordpress菜单项添加背景颜色。这是菜单上的第6项,虽然它在IE和Firefox中显示,但背景在Chrome中不起作用。
css是
/* main nav */
#main-nav {
min-height: 50px;
}
#main-nav #avia4-menu {
display: none;
}
@media (min-width: 768px) {
#main-nav #avia4-menu {
display: table;
}
}
#main-nav {
height: auto;
position: relative;
}
#main-nav,.avia4-menu {
width: 100%;
}
#main-nav .menu.av-main-nav{
display: table;
width: 100%;
}
#main-nav .menu.av-main-nav .menu-item{
display: table-cell;
float: none;
}
#main-nav .menu-item a{
padding:10px 20px 30px 20px;
font-size: 28px;
margin: 0 10px;
border-radius: 10px 10px 0px 0px;
color: #18160e;
font-family: "Roboto Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
text-align: center;
font-weight: normal;
}
#main-nav .menu-item a:hover,#main-nav .menu-item.current_page_item a{
color: #ffffff;
}
#main-nav .menu-item:nth-child(1) a{
background: url(images/navigation-bg.png) 0px 0px no-repeat, #ee2028;
}
#main-nav .menu-item:nth-child(2) a{
background: url(images/navigation-bg.png) 0px 0px no-repeat, #6b9043;
}
#main-nav .menu-item:nth-child(3) a{
background: url(images/navigation-bg.png) 0px 0px no-repeat, #d1ab35;
}
#main-nav .menu-item:nth-child(4) a{
background: url(images/navigation-bg.png) 0px 0px no-repeat, #5b72ab;
}
#main-nav .menu-item:nth-child(5) a{
background: url(images/navigation-bg.png) 0px 0px no-repeat, #d9747b;
}
#main-nav .menu-item:nth-child(6) a{
background: url(images/navigation-bg.png) 0px 0px no-repeat, #ff3300;
}
#main-nav .avia-bullet {
display: none;
}
HTML
<div id='main-nav' class=''>
<div class="avia4-menu av-main-nav-wrap"><ul id="avia4-menu" class="menu av-main-nav"><li id="menu-item-716" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-504 current_page_item menu-item-top-level menu-item-top-level-1"><a href="http://www.mempackcompany.com/" itemprop="url"><span class="avia-bullet"></span><span class="avia-menu-text">Home</span><span class="avia-menu-fx"><span class="avia-arrow-wrap"><span class="avia-arrow"></span></span></span></a></li>
<li id="menu-item-717" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-top-level menu-item-top-level-2"><a href="http://www.mempackcompany.com/about/" itemprop="url"><span class="avia-bullet"></span><span class="avia-menu-text">About</span><span class="avia-menu-fx"><span class="avia-arrow-wrap"><span class="avia-arrow"></span></span></span></a></li>
<li id="menu-item-1017" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-top-level menu-item-top-level-3"><a href="http://www.mempackcompany.com/trade/" itemprop="url"><span class="avia-bullet"></span><span class="avia-menu-text">Trade</span><span class="avia-menu-fx"><span class="avia-arrow-wrap"><span class="avia-arrow"></span></span></span></a></li>
<li id="menu-item-718" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-top-level menu-item-top-level-4"><a href="http://www.mempackcompany.com/stockists/" itemprop="url"><span class="avia-bullet"></span><span class="avia-menu-text">Stockists</span><span class="avia-menu-fx"><span class="avia-arrow-wrap"><span class="avia-arrow"></span></span></span></a></li>
<li id="menu-item-715" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-top-level menu-item-top-level-5"><a href="http://www.mempackcompany.com/contact/" itemprop="url"><span class="avia-bullet"></span><span class="avia-menu-text">Contact</span><span class="avia-menu-fx"><span class="avia-arrow-wrap"><span class="avia-arrow"></span></span></span></a></li>
<li id="menu-item-1760" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-top-level menu-item-top-level-6"><a href="http://www.mempackcompany.com/education-offers/" itemprop="url"><span class="avia-bullet"></span><span class="avia-menu-text">Education</span><span class="avia-menu-fx"><span class="avia-arrow-wrap"><span class="avia-arrow"></span></span></span></a></li>
</ul></div> <div class="clearfix"></div>
<div class="topTear"></div>
<!-- end main nav -->
</div>