.primary-menu-inner ul.sf-menu li.active-trail

The .primary-menu-inner ul.sf-menu li.active-trail borders are showing thru when I hover in the active state, here is my css

.primary-menu-inner ul.sf-menu a {
color: #FFFFFF;
display:block;
/*height:11px;*/
padding-bottom: 0.6em;
/*background: url(../images/divider.png) no-repeat right 0px;*/
border-left:1px solid #ffcc33;
border-right:1px solid #6f4c23;
}

.primary-menu-inner ul.sf-menu a:visited {
color:#fff;
/*background-color:#80623F;*/
}

/* HOVER STATE background */

.primary-menu-inner ul.sf-menu a:hover {
background: url(../images/nav1.png) no-repeat right -32px;
border-left:1px solid #ffcc33;
border-right:1px solid #6f4c23;
}

/* ACTIVE STATE background with border */

.primary-menu-inner ul.sf-menu a.active {
color:#fff;
border-style:none;
}

.primary-menu-inner ul.sf-menu li.active-trail {
background: url(../images/nav.png) no-repeat right -64px;
border-bottom:1px solid #a67c52;
border-right:1px solid #a67c52;
border-left: 1px solid #38230b;
visibility: visible;
}

.primary-menu-inner ul.sf-menu li.active-trail a {
border-style:none;
}

I do not want the border to show thru when I am in active state when hovering....

Any suggestion...