CSS Menu drop down part not working for ie8 and flashing shut on iPhone 5 browser

Question

My CSS drop down menu will not show up in ie8 and flashes then shuts on iPhone 5 browsers (responsive design)..using code from a themeforest template. I am using CSS (HTML only) in the BC menu system. without further adieu here is the code.
HTML (I removed the BC javascript)______________________
<div id="navigation">
<ul>
<li><a href="/index.htm">Home</a></li>
<li><a href="/about">About</a>
<ul>
<li><a href="/leadership">Leadership</a></li>
<li><a href="/giving">Giving</a></li>
<li><a href="/careers">Careers</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</li>
</ul>
</div>
CSS______________________
#navigation {
float: right;
#navigation ul, #navigation li {
list-style:none;
padding:0;
margin:0;
display:inline;
#navigation ul li{
float:left; 
position:relative;
#navigation ul li a {
font-family: Arial, sans-serif;
display: inline-block;
color: #888;
padding: 40px 6px 10px 6px;
margin: 0 5px;
text-decoration: none;
font-size: 14px;
border-bottom: 3px solid transparent;
#navigation ul li a:hover{
border-bottom: 3px solid #555;
#navigation ul ul {
opacity: 0;
margin: -3px 0 0 5px;
filter: alpha(opacity=0);
position: absolute;
top:-99999px;
left: 0;
background: #fff;
border: 1px solid #dddddd;
border-top: 3px solid #555;
z-index: 999;
#navigation ul ul li a:hover {
border-bottom: 1px solid #ddd;
#navigation ul ul li a {
padding: 8px 0;
display: block;
width: 130px;
margin: 0 16px;
font-family: Arial, sans-serif;
font-weight: normal;
font-size: 12px;
border-bottom: 1px solid #dddddd;
border-top: 1px solid transparent;
#navigation ul ul ul {
position:absolute;
top:-99999px;
left:100%;
opacity: 0;
margin: -3px 0 0 0;
z-index: 999;
#navigation ul ul ul li a {
border-bottom: 1px solid #dddddd !important;
border-top: 1px solid transparent;
#navigation ul ul li:last-child a, #navigation ul ul li:last-child a:hover {
border-bottom: 1px solid transparent
#navigation ul ul ul li:last-child a {
border-bottom: 1px solid transparent !important
#navigation ul li:hover>ul{
opacity: 1;
position:absolute;
top:99%;
left:0;
#navigation ul ul li:hover>ul{
position:absolute;
top:0; left:100%;
opacity: 1;
z-index:497;
background: #fff border: 0;
#navigation ul li:hover > a {
color: #444;
#navigation ul ul li:hover > a {
border-top: 1px solid transparent;
color: #444;
#current {
font-weight: bold !important;
color: #444 !important;
border-bottom: 3px solid #555 !important;

Answer 1

Well to show the menu it runs off opacity, Opacity is not cross browser and IE8 as you noticed will not work with it.
This menu method of a CSS menu is also not mobile friendly.
You will need the MS filters to work in older IE's
http://css-tricks.com/snippets/css/cross-browser-opacity/