I'm doing a dropdown-menu, and combine JS. It's display well in all browser, but it has an error when displaying in IE 7,8 browser:

Menu dropdown in normal :



Menu dropdown when hover :



Here is error appear when I hover mouse to More menu, More button is flashed when I drag mouse across a every border-bottom in dropdown-menu

Click here to see this error


Here is css for menu dropdown in the above:
.layout_page_header .layout_menu_main_youmusic .navigation
{
background-color: #FFFFFF;
float: left;
height: 36px;
padding-left: 0;
}
.layout_page_header .layout_menu_main_youmusic .navigation li
{
padding-left:0px;
padding-right:0px;
margin-right:0px;
}
.layout_page_header .layout_menu_main_youmusic .navigation li a
{
display:block;
color:#ffffff;
text-decoration:none;
}
.layout_menu_main_youmusic .navigation .view_more_menu a {
padding: 0px 10px 0px 0px;
/*background:url(images/mn_more.jpg) repeat-x top left;*/
background-color: #F39ABF;
}

.layout_menu_main_youmusic .navigation .activee a{
/*margin-top: -2px;*/
background:url(images/mn_more.jpg) repeat-x top right;
}
.layout_menu_main_youmusic .navigation .view_more_menu a b {
display:block;
float:left;
padding:0 0 0 10px;
cursorointer;
color: #FFFFFF;
}

.layout_menu_main_youmusic .navigation .activee a b{
background:url(images/mn_more.jpg) repeat-x top left;
color: #FFFFFF;
}
.layout_menu_main_youmusic .navigation .view_more_menu a:hover{
background:url(images/mn_more.jpg) repeat-x top right;
padding: 0px 10px 0px 0px;
color: #ffffff;
/*margin-top:-2px;*/
}
.layout_menu_main_youmusic .navigation .view_more_menu a:hover b{
background:url(images/mn_more.jpg) repeat-x top left;
padding: 0px 0px 0px 10px;
}
.layout_page_header .layout_menu_main_youmusic .navigation li div.dropmenudiv {
Z-INDEX: 500;
VISIBILITY: hidden;
FONT: 8pt tahoma;
WIDTH: 90px;
POSITION: absolute;
TOP: 0px;
margin-left: -4px;
Z-INDEX: 99999999;
background:#181717 url(images/bd_top_more.jpg) no-repeat top;
margin-top: -2px; /*-2 nho tra lai*/
/*border-top:1px solid #6e8043;*/
}


.layout_page_header .layout_menu_main_youmusic .navigation li div.dropmenudiv A {
DISPLAY: block;
MARGIN: 0px;
COLOR: #ffffff;
TEXT-INDENT: 0px;
TEXT-ALIGN: left;
TEXT-DECORATION: none;
font-weight:bold;
font-size: 12px;
padding: 0px 0px 8px 14px;
background: none repeat scroll 0 0 transparent;
width: 83%;
border-bottom:1px solid #6e8043;
border-left: 1px solid #6e8043;
border-right: 1px solid #6e8043;
height: 25px;
/*BORDER-BOTTOM: #4b4a4a solid 1px;*/

}


.layout_page_header .layout_menu_main_youmusic .navigation li div.dropmenudiv A:hover {
COLOR: #6dcff6;
font-weight:bold;
background: none repeat scroll 0 0 transparent;
}


.layout_page_header .layout_menu_main_youmusic .navigation li div.dropmenudiv .active{
COLOR: #6dcff6;
font-weight:bold;
BACKGROUND-COLOR: #181717;
}
And this is code of above More menu :
$i = 0;
$arrMore = array();
<ul class="navigation">
<li id = "more" class="view_more_menu"><a href="javascript: void(0)" onMouseover="cssdropdown.dropit(this,event,'dropmenu1')"> <b><?php echo $this->translate('More');?></b> </a>
<div id="dropmenu1" class="dropmenudiv">
<?php
for($j = 5; $j < $i; $j++){
echo $arrMore[$j];
}
?>
</div>
</li>
<?php
}else{
?>
<li class="activee"><a href="javascript: void(0)" onMouseover="cssdropdown.dropit(this,event,'dropmenu1')"> <b> <?php echo $this->translate('More');?> </b> </a>
<div id="dropmenu1" class="dropmenudiv">
<?php
for($j = 5; $j < $i; $j++){
echo $arrMore[$j];
}
?>
</div>
</li>
<?php
}
}
?>
</ul>

Would you help me fix this error ?!? Thanks very much !! :"}