I have added the following to the child.css in order to get control over IE8 dropdowns:
(for anyone else having the same troubles: distorted nav ul and ul li text sizes and empty (transparent) drop down backgrounds … )
nav{position:relative;border-radius:5px;margin-top:0;background-color:#333;background-image:url(images/nav-bg.png);
background-repeat:repeat-x;clear:both}
nav ul.menu{padding-left:4px}
nav .parent > a, nav .parent > a:hover{background-image:url(images/arrow.png);background-position:right;background-repeat:no-repeat}
nav ul ul .parent > a, nav ul ul .parent:hover > a:hover, nav ul ul li:hover ul .parent >
a, nav ul ul li:hover ul .parent > a:hover{background-image:url(images/arrow-right.png);background-position:right;background-repeat:no-repeat}
nav ul, nav ul li{display:inline}
nav ul li a{display:inline-block;font-family:’lucida grande’,helvetica,arial,verdana,sans-serif;
font-size:12px !important;color:#fff;line-height:38px !important;text-decoration:none;text-transform:uppercase;
font-variant: small-caps;text-shadow:1px 1px 1px #333;padding:0 15px;border-right:1px solid #555}
nav ul.menu li a{margin-left:-4px}
nav ul li a:hover{font-size:12px;color:#fff;text-decoration:none;box-shadow:0 0 5px #000 inset;background:#444}
nav .current-menu-item a, nav .current_page_item a{color:#ccc;text-shadow:none}
nav .current-menu-item .sub-menu a, nav .current_page_item .children a{color:#fff;text-shadow:1px 1px 1px #333}
nav ul > li:first-child a:hover{border-radius:5px 0 0 5px}
nav .sub-menu li a, nav .children li a{border-radius:0 !important}
nav li .sub-menu{margin-left:-4px}
nav ul li{position:relative}
nav li ul{display:none;position:absolute;top:29px}
nav li ul a{background:#666}
nav ul ul li:hover ul, nav ul ul ul li:hover ul{margin:-34px 0 11px 179px}
nav ul li:hover ul{display:inline-block}
nav ul ul, nav ul li:hover ul ul, nav ul ul li:hover ul ul{display:none}
nav ul li:hover ul, nav ul ul li:hover ul, nav ul ul ul li:hover ul{display:block;z-index:2147483647}
nav ul li:hover ul li a, nav ul ul li:hover ul li a, nav ul ul ul li:hover ul li a{font-size:12px !important;
line-height:30px!important;width:150px;padding:0 14px !important;border:1px solid #444;margin:-1px 0 0;opacity:0.9}
nav ul li:hover ul li a{background:#666}
nav ul ul li:hover ul li a{background:#666}
nav ul ul ul li:hover ul li a{background:#666}
nav ul li:hover ul li a:hover, nav ul ul li:hover ul li a:hover, nav ul ul ul li:hover ul li a:hover{background:#555;opacity:1;box-shadow:none}
I still have trouble with the sub menu li being indented after being clicked… clear the cache, then it is OK until the next click.