I can not appear to wrap my mind around what's wrong with my 3rd level drop lower menu on my small primary navigation. I have investigated, exactly what surrounds the z-index bug turning round the superfish and IE8... I have attempted different solutions which have assisted others but nothing appears to become working. I'm using latest install of Wordpress, I have deactivated all plug-inches added z-index to my style.css but there is nothing working... Using Superfish v1.4.8

Site: http://goo.gl/Z0zkg

this is exactly what it presently appears like: http://cl.ly/AvO7

below is my css for that dropdown menu

ul#top-menu li { margin-left: 10px; display:block; height:29px; /*padding:0 12px 0 0;*/ float:left; position: relative; }
    ul#top-menu a { font-size: 12px; color: #555555; text-decoration: none; text-shadow: 1px 1px 1px #ffffff; display: block; line-height:27px; }

    ul#top-menu > li { padding:0 5px 0 0; }
        ul#top-menu > li > a { padding:0 0 0 5px; }

    ul#top-menu > li.current_page_item { background:url(images/menu-nav.png) no-repeat scroll right bottom transparent; padding:0 15px 0 0; }
        ul#top-menu > li.current_page_item > a { color: #ffffff; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); background:url(images/menu-nav.png) no-repeat scroll 0 0 transparent; display:block; height:29px; line-height:27px; padding:0 0 0 15px; }

ul.nav ul { width: 198px; background: #fff; border: 1px solid #e8e8e8; top: 34px !important; box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow:1px 1px 5px 0px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 1x 1px 5px 0px rgba(0, 0, 0, 0.1); border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; /*border-top-left-radius: 0px;-moz-border-radius-topleft: 0px; border-top-right-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px;*/ padding: 13px 0px 12px; z-index: 9999px; display: none; }
    ul.nav ul li { margin: 0px; padding: 6px 10px 6px 10px !important;  }
        ul.nav ul li a { line-height: 18px !important; width: 150px; background-color: #fff; }

        ul.nav li:hover ul ul, ul.nav li.sfHover ul ul { top: -16px !important; left: 183px !important; border-top-right-radius: 8px; -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px;  }

span.menu_arrow { display: block; width: 8px; height: 5px; background: url(images/menu-active-arrow.png) no-repeat; position: absolute; top: -15px; left: 37%; display: none; }

span.menu_top_arrow { display: block; width: 19px; height: 10px; background: url(images/topmenu_arrow.png) no-repeat; position: absolute; top: -10px; left: 22px; }