将鼠标悬停在上一个链接的菜单上

Question

联系人的导航菜单悬停在Chrome中是正确的，但在Firefox中则不正确。

如果我增加“.menu_bar ul li：first-child a”菜单的填充

我的HTML

<div class="menu_bar clsClearFix">
<ul>
    <li><a href="index.php"  class="{if $CFG.site.current_Page == 'index.php' }  act  {else} act_hover {/if}">Home</a></li>
    <li><a href="courses.php"  class="{if $CFG.site.current_Page == 'courses.php' }  act  {else} act_hover {/if}">Certified Courses</a></li>
    <li><a class="act_hover" href="#">Vocational Training</a></li>
    <li><a href="business-consultancy.php"  class="{if $CFG.site.current_Page == 'business-consultancy.php' }  act  {else} act_hover {/if}" >Business Clinic</a></li>
    <li><a href="accreditation.php"  class="{if $CFG.site.current_Page == 'accreditation.php' }  act  {else} act_hover {/if}">Accreditation</a></li>
    <li><a href="online-training.php"  class="{if $CFG.site.current_Page == 'online-training.php' }  act  {else} act_hover {/if}">Online training</a></li>
    <li><a {if $CFG.site.current_Page != 'contactus.php' }   href="contactus.php" {else} href="#" {/if} class="{if $CFG.site.current_Page == 'contactus.php' }  act  {else} act_hover {/if}">Contact Us</a></li>
</ul>

抱歉

我觉得很难粘贴css

我有很长的CSS因此它不接受提交stackoverflow

这是我的css

.clsClearFix:after {
content: ".";
display: block;
height: 0;clear: both;
visibility: hidden;
}

.menu_bar{
width:949px;
margin:0 auto;
background:url(../images/menu_flow.png) repeat-x top left;
}
.menu_bar ul{
list-style-type:none;
margin:0px;
padding:0px;
}
.menu_bar ul li{
list-style-type:none;
display:block;
float:left;
background:url(../images/menu_sep.png) no-repeat center left;
}
.menu_bar ul li:first-child{
background:none;
}
.menu_bar ul li:first-child a{
padding:22px 21px 22px 21px; 
}
.menu_bar ul li a{
color:#fff;
font:normal 15px MyriadWebProRegular;
display:block;
float:left;
text-decoration:none;
text-transform:uppercase;
padding: 22px 13px;
}
.menu_bar ul li:hover a.act_hover, .menu_bar ul li a.act{
background:url(../images/menu_act.png) repeat-x top left;
color:#000000;
}

谢谢你