Hide ::before on active item just while hover

Question

I have this structure:

<nav>
    <ul>
        <li><a href="javascript:void(0)" class="menuitem active">see all projects</a></li>
        <li><a href="javascript:void(0)" class="menuitem">about</a></li>
        <li><a href="javascript:void(0)" class="menuitem">contact</a></li>
    </ul>
</nav>

When .active can be one of the three (it just hightlight the page the user is in). The problem is that I'm creating an "arrow" hightlight on .active item via ::before selector and I want that if the user hovers over any item, the ::before dissapears JUST WHILE hover.

This is how it looks:

http://i.imgur.com/cIZXHEN.png

And on hover looks like this (see the problem? while hover there are two arrows now, I want the arrow just to be on the one that is hovered and hide it on the .active , after mouseout the arrow goes back to the .active one):

http://i.imgur.com/JTLKNFK.png

This is my css:

header nav {
  float: right;
  font-family: 'avenir_lt_std65_medium';
  text-transform: uppercase;
  text-align: right;
  font-size: 8px;
  line-height: 12px;
  letter-spacing: 2px;
  color: #000000;
}
header nav ul li a.active::before {
  content: ">> ";
}
header nav ul li a:hover:before {
  content: ">> ";
}

Answer 1

Would this do the trick ?

 header nav { float: right; font-family: 'avenir_lt_std65_medium'; text-transform: uppercase; text-align: right; font-size: 8px; line-height: 12px; letter-spacing: 2px; color: #000000; } nav ul li a.active::before { content: ">> "; } nav ul:hover li a::before { content: none; } nav ul li a:hover:before { content: ">> "; } 

 <nav> <ul> <li><a class="menuitem active">see all projects</a></li> <li><a class="menuitem">about</a></li> <li><a class="menuitem">contact</a></li> </ul> </nav>