Jquery mouseover/mouseout IE8 Колебания

У меня есть меню Jquery, которое отображает вспомогательную навигацию, используя jquery .addclass и .css. Я добавляю классы и манипулирую css с наведением мыши и отведением мыши. В Firefox, Chrome и Safari все работает нормально, но в IE8 кажется, что между классами "мерцает".

Это трудно объяснить, но если вы посмотрите на мою ссылку в FF и IE, вы поймете, что я имею в виду.

http://trustmarkstaging.com/

Вот мой jQuery:

<script>

$(document).ready(function(){

$("#nav .item-466").mouseover(function(){
 $("#selector").addClass("item-466-selector");
 $("#nav .menu .current ul li").css("display", "none");
 $("#nav .menu .active ul li").css("display", "none");
 $("#nav .menu .item-466 ul li").addClass("highlight");
});
$("#nav .item-466").mouseout(function(){
 $("#selector").removeClass("item-466-selector");
 $("#nav .menu .current ul li").css("display", "inline");
 $("#nav .menu .active ul li").css("display", "inline");
 $("#nav .menu .item-466 ul li").removeClass("highlight");
});

 $("#nav .item-470").mouseover(function(){
 $("#selector").addClass("item-470-selector");
 $("#nav .menu .current ul li").css("display", "none");
 $("#nav .menu .active ul li").css("display", "none");
 $("#nav .menu .item-470 ul li").addClass("highlight");
});
 $("#nav .item-470").mouseout(function(){
 $("#selector").removeClass("item-470-selector");
 $("#nav .menu .current ul li").css("display", "inline");
  $("#nav .menu .active ul li").css("display", "inline");
 $("#nav .menu .item-470 ul li").removeClass("highlight");
});
$("#nav .item-472").mouseover(function(){
 $("#selector").addClass("item-472-selector");
 $("#nav .menu .current ul li").css("display", "none");
 $("#nav .menu .active ul li").css("display", "none");
 $("#nav .menu .item-472 ul li").addClass("highlight");
});
$("#nav .item-472").mouseout(function(){
 $("#selector").removeClass("item-472-selector");
 $("#nav .menu .current ul li").css("display", "inline");
  $("#nav .menu .active ul li").css("display", "inline");
 $("#nav .menu .item-472 ul li").removeClass("highlight");
});

$("#nav .item-473").mouseover(function(){
 $("#selector").addClass("item-473-selector");
 $("#nav .menu .current ul li").css("display", "none");
 $("#nav .menu .active ul li").css("display", "none");
   $("#nav .menu .item-473 ul li").addClass("highlight");
});
$("#nav .item-473").mouseout(function(){
 $("#selector").removeClass("item-473-selector");
 $("#nav .menu .current ul li").css("display", "inline");
 $("#nav .menu .active ul li").css("display", "inline");
 $("#nav .menu .item-473 ul li").removeClass("highlight");
});

$("#nav .item-474").mouseover(function(){
 $("#selector").addClass("item-474-selector");
 $("#nav .menu .current ul li").css("display", "none");
 $("#nav .menu .active ul li").css("display", "none");
 $("#nav .menu .item-474 ul li").addClass("highlight");
});
$("#nav .item-474").mouseout(function(){
 $("#selector").removeClass("item-474-selector");
 $("#nav .menu .current ul li").css("display", "inline");
 $("#nav .menu .active ul li").css("display", "inline");
 $("#nav .menu .item-474 ul li").removeClass("highlight");
});
});

</script>

Мой CSS:

<style>
#nav .menu li {
list-style: none;
display: inline;
float: left;
border-radius: 10px;
padding: 10px 16px;
margin-left: 3px;
}

.highlight {
display: inline!important;
}
</style>

HTML устроен следующим образом:

<ul id="nav">
<li class="item-466 active">Page 1</li>
    <ul>
        <li>SubPage1</li>
        <li>SubPage2</li>
        <li>SubPage3</li>
    </ul>
<li class="item-470">Page 2</li>
<li class="item-472">Page 3</li>
<li class="item-473">Page 4</li>
</ul>

Любая помощь будет оценена по достоинству! Заранее спасибо. :)