一个菜单项的背景不会在Chrome中显示

时间:2016-11-02 12:04:13

标签: css wordpress google-chrome

我正在尝试为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>

0 个答案:

没有答案