I'm having a problem with a navigation menu. When hovering over a link gradient changes from green to red however in IE when moving between links the original link hovered on remains red while the current option the mouse is on remains green. It works fine in other browsers but surprise surprise IE is being awkward. Can anyone help me with this. Below is my code;


HTML---------------------------------------------------------------------------------------------------------------------------------------------------

<nav>
<ul class="Navigation_Menu">
<li id="Home"><a href="http://www.giacomospizza.co.uk">Home</a></li>
<li id="Menu"><a href="http://www.giacomospizza.co.uk/Menu">Menu</a></li>
<li id="Offers"><a href="http://www.giacomospizza.co.uk/Offers">Offers</a></li>
<li id="About_Us"><a href="http://www.giacomospizza.co.uk/About_Us">About Us</a></li>
<li id="Contact_Us"><a href="http://www.giacomospizza.co.uk/Contact_Us">Contact Us</a></li>
</ul>
</nav>


CSS---------------------------------------------------------------------------------------------------------------------------------------------------

Nav
{
text-align: center;
margin: 0;
padding: 0;
border:0 ;
}


/* Specifying a fallback color and we define CSS3 gradients for the major browsers: */
.Navigation_Menu li
{
position:relative;
float: left;
list-style: none;
width: 20%;

/* Adding a 1px inset highlight for a more polished efect: */

box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
-moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
-webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;

background: rgb(201,222,150); /* Old browsers */
background: -moz-linear-gradient(top, rgba(201,222,150,1) 0%, rgba(138,182,107,1) 44%, rgba(57,130,53,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(201,222,150,1)), color-stop(44%,rgba(138,182,107,1)), color-stop(100%,rgba(57,130,53,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* W3C */
filter: progidXImageTransform.Microsoft.gradient( startColorstr='#c9de96', endColorstr='#398235',GradientType=0 ); /* IE6-9 */

}

.Navigation_Menu li:after{

/* This creates a pseudo element inslide each LI */

content:'.';
text-indent:-9999px;
overflow:hidden;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:1;
opacity:0;

/* Gradients! */



background-image:-webkit-gradient(linear, left top, right top, from(rgba(0,142,13,0.5)),color-stop(0.5,rgba(0,142,13,0)), to(rgba(0,142,13,0.5)));
background-image:-moz-linear-gradient(left, rgba(0,142,13,0.5), rgba(0,142,13,0) 50%, rgba(0,142,13,0.5));
background-image:-o-linear-gradient(left, rgba(0,142,13,0.5), rgba(0,142,13,0) 50%, rgba(0,142,13,0.5));
background-image:-ms-linear-gradient(left, rgba(0,142,13,0.5), rgba(0,142,13,0) 50%, rgba(0,142,13,0.5));
background-image:linear-gradient(left, rgba(0,142,13,0.5), rgba(0,142,13,0) 50%, rgba(0,142,13,0.5));

/* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */

box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;

/* This will create a smooth transition for the opacity property */

-moz-transition:0.25s all;
-webkit-transition:0.25s all;
-o-transition:0.25s all;
transition:0.25s all;
}

/* Treating the first LI and li:after elements separately */

.Navigation_Menu li:first-child{
border-radius: 4px 0 0 4px;
}

.Navigation_Menu li:first-child:after,
.Navigation_Menu li.selected:first-child:after
{
box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
-moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
-webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
border-radius:4px 0 0 4px;
}

.Navigation_Menu li:last-child
{
border-radius: 0 4px 4px 0;
}

/* Treating the last LI and li:after elements separately */

.Navigation_Menu li:last-child:after,
.Navigation_Menu li.selected:last-child:after
{
box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
border-radius:0 4px 4px 0;
}

.Navigation_Menu li:hover:after,
.Navigation_Menu li.selected:after,
.Navigation_Menu li:target:after
{
/* This property triggers the CSS3 transition */
opacity:1;
}

.Navigation_Menu:hover li.selected:after,
.Navigation_Menu:hover li:target:after
{
/* Hides the targeted li when we are hovering on the UL */
opacity:0;
}

.Navigation_Menu li.selected:hover:after,
.Navigation_Menu li:target:hover:after
{
opacity:1 !important;
}

/* Styling the anchor elements */

.Navigation_Menu li a
{
color: white;
display: inline-block;
font: 16px/1 "Lucida Calligraphy";
padding: 5px 35px 5px;
position: relative;
text-shadow: 1px 1px 0 black;
z-index:2;
text-decoration:none !important;
white-space:nowrap;
}


a, a:visited
{
text-decoration:none;
outline:none;
color:#54a6de;
}

a:hover
{
text-decoration:underline;
}

Thanks in advance.