Jquery menu Sub-Menu moving up slightly on hover in IE

[colinod]

I have built a Jquery horizontal sub menu which gets data from asp and works fine in all browsers apart from IE, in ie when you hover over main buttons sub menu appears and when you move uver the sub menu it moves up a few pixels... really annoying?? Im sure its in the css somewhere.

CSS code

<style>
body {
    background-color: #000;
}
/*Drop Down Menu Styles*/
#ddmenu {
    margin: 0;
    margin-left: -2px;
    padding: 0;
    height:43px;
    width:1000px;
}
 
#ddmenu li {   
    float: left;
    list-style: none;
    font: 16px Arial, Helvetica, sans-serif;
}
 
#ddmenu li a { 
    display: block;
    padding: 0px 0px;
    text-decoration: none;
    width: auto;
    white-space: nowrap;
    text-align:center;
    font-weight:bold;
}
 
#ddmenu li a:hover {   
    color: #ef007b;
    font-weight: 800;
}
#ddmenu li ul {
    margin: -6px 0 0 3px;
    padding: 0;
    position: absolute;
    visibility: hidden;
    width:200px;
    background-color:#f39617;
}
 
#ddmenu li ul li { 
    display:inline;
    width: 200px;
}
 
#ddmenu li ul li a {
    width:auto;   
    display: inline;
    color: #000;
    font-size: 13px;
    padding: 2px 10px;
    font-weight: 800;
}
 
 
.menu_class {
    border-left:medium solid #000;
    border-right:medium solid #000;
    border-bottom:medium solid #000;
    width: auto;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
.menu_class2 {
    border-top:medium solid #000;
    width: 100%;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
</style>
 

JQuery code

<script>
$(document).ready(function () {
// <![CDATA[
    var timeout    = 500;
    var closetimer = 0;
    var ddmenuitem = 0;
 
    function ddmenu_open(){
        ddmenu_canceltimer();
           ddmenu_close();
           ddmenuitem = $(this).find('ul').css('visibility', 'visible');
    }
 
    function ddmenu_close(){
        if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
    }
 
    function ddmenu_timer(){
        closetimer = window.setTimeout(ddmenu_close, timeout);
    }
 
    function ddmenu_canceltimer(){ 
        if(closetimer){ 
            window.clearTimeout(closetimer);
                closetimer = null;
    }}
 
    $(document).ready(function(){ 
        $('#ddmenu > li').bind('mouseover', ddmenu_open)
        $('#ddmenu > li').bind('mouseout',  ddmenu_timer)
    });
 
    document.onclick = ddmenu_close;
// ]]>  
});
 
 
</script>
 

HTML code

<ul id="ddmenu">
 <li><a href="boys2.asp?id=386&voicetype=All"><img src="http://bytes.com/submit/images/voicetypes/tabs/mainpage_up.png" alt="Main Page" id="mainpage" onMouseOver="MM_swapImage('mainpage','','../images/voicetypes/tabs/mainpage_dn.png',1)" onMouseOut="MM_swapImgRestore()" border="0"></a></li>
 
 
 
    <li><a href="javascript:void(0)"><img src="http://bytes.com/submit/images/voicetypes/tabs/Ages_up.png" alt="Ages" id="Ages" onMouseOver="MM_swapImage('Ages','','../images/voicetypes/tabs/Ages_dn.png',1)" onMouseOut="MM_swapImgRestore()" border="0"></a>
        <ul class="menu_class">
 
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=20s-30s" >20's - 30's</a></li>
 
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=30s" >30s</a></li>
 
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=30s-40s" >30's - 40's</a></li>
 
        </ul>         
    </li>
 
 
 
    <li><a href="javascript:void(0)"><img src="http://bytes.com/submit/images/voicetypes/tabs/Styles_up.png" alt="Styles" id="Styles" onMouseOver="MM_swapImage('Styles','','../images/voicetypes/tabs/Styles_dn.png',1)" onMouseOut="MM_swapImgRestore()" border="0"></a>
        <ul class="menu_class">
 
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Animation/Cartoon" >Animation/Cartoon</a></li>
 
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Authoritative" >Authoritative</a></li>
 
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Characterful/Quirky" >Characterful/Quirky</a></li>
 
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Comedy/Humorous" >Comedy/Humorous</a></li>
 
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Deep/Powerful/Dramatic" >Deep/Powerful/Dramatic</a></li>
 
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Documentary/Corporate" >Documentary/Corporate</a></li>
 
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Friendly/Upbeat" >Friendly/Upbeat</a></li>
 
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Impressions" >Impressions</a></li>
 
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Kid-Friendly" >Kid Friendly</a></li>
 
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Movie-Trailer" >Movie Trailer</a></li>
 
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Sports-Commentator" >Sports Commentator</a></li>
 
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Versatile" >Versatile</a></li>
 
        </ul>         
    </li>
 
 
 
    <li><a href="javascript:void(0)"><img src="http://bytes.com/submit/images/voicetypes/tabs/World Accents_up.png" alt="World Accents" id="World Accents" onMouseOver="MM_swapImage('World Accents','','../images/voicetypes/tabs/World Accents_dn.png',1)" onMouseOut="MM_swapImgRestore()" border="0"></a>
        <ul class="menu_class">
 
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Australian" >Australian</a></li>
 
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Dutch" >Dutch</a></li>
 
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=French" >French</a></li>
 
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Mexican" >Mexican</a></li>
 
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Oriental" >Oriental</a></li>
 
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Russian" >Russian</a></li>
 
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=South-African" >South African</a></li>
 
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Spanish" >Spanish</a></li>
 
        </ul>         
    </li>
 
 
 
    <li><a href="javascript:void(0)"><img src="http://bytes.com/submit/images/voicetypes/tabs/UK Accents_up.png" alt="UK Accents" id="UK Accents" onMouseOver="MM_swapImage('UK Accents','','../images/voicetypes/tabs/UK Accents_dn.png',1)" onMouseOut="MM_swapImgRestore()" border="0"></a>
        <ul class="menu_class">
 
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Neutral" >Neutral</a></li>
 
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Irish" >Irish</a></li>
 
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Scottish" >Scottish</a></li>
 
        </ul>         
    </li>
 
<li><a href="boys2.asp?id=386&voicetype=USA/Mid-Atlantic"><img src="http://bytes.com/submit/images/voicetypes/tabs/usa mid atlantic_up.png" alt="Main Page" id="usamid" onMouseOver="MM_swapImage('usamid','','../images/voicetypes/tabs/usa mid atlantic_dn.png',1)" onMouseOut="MM_swapImgRestore()" border="0"></a>
</li>
 
 
 
    <li><a href="javascript:void(0)"><img src="http://bytes.com/submit/images/voicetypes/tabs/Foreign Languages_up.png" alt="Foreign Languages" id="Foreign Languages" onMouseOver="MM_swapImage('Foreign Languages','','../images/voicetypes/tabs/Foreign Languages_dn.png',1)" onMouseOut="MM_swapImgRestore()" border="0"></a>
        <ul class="menu_class">
 
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=French-Language" >French Language</a></li>
 
        </ul>         
    </li>
 
</ul>  
 

the page can be seen here http://www.yaketyyak.co.uk/newpages/...&voicetype=All

Thanks

[Dormilich]

do you use IE in quirks mode? then it could be explained with the different box models.

[colinod]

I have tried all modes in ie and its fine in ie7 and ie8 mode useless in quirks and moves in ie9?