css not working in IE 9 but works well in chrome

Question

I am trying to implement a drop down menu on mouse hover. It works really well in google chrome but everything gets messed up in IE. Kindly help me in correcting these css codes so that they work properly in IE too.

This is my css code for the drop down menu

.menu ul
{
list-style-type: none;
background-image: url(b.png);
height: 30px;
margin:0;
padding:0
}

.menu ul li
{
float: left;
}

.menu ul li a 
{
background-image: url(../Image/navi_bg_divider.png);
background-repeat: no-repeat;
background-position: right;
padding-right: 3%;
padding-left: 3%;
/*display: block;*/
line-height:25px;
text-decoration: none;
font-family: Tahoma,"Times New Roman",Times,serif;
font-size: 14px;
color:white;


}

.menu ul li a:hover
{
color: silver;
}






nav ul ul {
    display: none;
}

    nav ul li:hover > ul {
        display: block;
    }


nav ul {
    background: #efefef; 
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0 15px;
    border-radius: 10px;  
    list-style: none;
    position: relative;
    display: inline-table;

z-index:1000;
}
    nav ul:after {
        content: ""; clear: both; display: block;
    }


nav ul li {
    float: left;
}
    nav ul li:hover {
        background: #4b545f;
        background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
    }
        nav ul li:hover a {
            color: #fff;
        }

    nav ul li a {
        display: block; padding: 10px 14px;
        color: #757575;

     text-decoration: none;
    font-size:100%; 
    }

nav ul ul {
    background: #5f6975; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
}
    nav ul ul li {
        float: none; 
        border-top: 1px solid #6b727c;
        border-bottom: 1px solid #575f6a;
        position: relative;
    }
        nav ul ul li a {
            padding: 10px 10px;
            color: #fff;
        }   
            nav ul ul li a:hover {
                background: #4b545f;
            }

nav ul ul ul {
    position: absolute; left: 100%; top:0;

This is part of the code for menu:-

<div >
<table><tr><td>
<ul id="menu">

<li><a href="#">ACQUISITIONS</a>
            <ul>
                <li><a href="#">EXTERNAL ACQUISITIONS</a>
                    <ul>
                        <li><a href="#">ACQUISITION PROCESS METRICS</a>
    <img src="i.jpg"  class="masterTooltip" title="About APM" />
</li>
                        <li><a href="#">CAMPAIGN TRACKING REPORTS-LEAD MARKETS</a>
<img src="i.jpg" class="masterTooltip" title="About campaign tracking reports" /></li></li>
                        <li><a href="#">DSC(DIGITAL SUB-CHANNEL)</a></li>
                        <li><a href="#">EARLY PERFORMANCE INDICATORS</a></li>
                        <li><a href="#">INTERACTIVE CAMPAIGN RESPONSE TRACKING(iCRT)</a></li>
                        <li><a href="#">INVESTMENT TRACKING</a></li>
                        <li><a href="#">QUARTERLY ROI</a></li>
                        <li><a href="#">ANNUAL ROI</a></li>
                    </ul>
                </li>

                       <li><a href="#">INTERNAL ACQUISITIONS</a></li>
                <li><a href="#">ACQUISITION ADVISOR TOOLKIT</a> </li>
            </ul>


        </li>
        <li><a href="#">BUSINESS ANALYSIS</a>               
            <ul>
                <li><a href="#">PORTFOLIO</a></li>
                <li><a href="#">COMMERCE AND EDS</a></li>
                <li><a href="#">SHARE OF LAYOUT</a></li>
            </ul>
        </li>   
            <li><a href="#">CENTRAL LENDING</a></li>
            <li><a href="#">COMMERCIAL CARD</a></li>
            <li><a href="#">INSURANCE</a></li>          
            <li><a href="#">SBS ANALYSIS</a></li>           
            <li><a href="#">SUPPORT</a>
            <ul>
                <li><a href="#">DATA DICTIONARY</a></li>
                <li><a href="#">REFERENCES</a><img src="i.jpg" class="masterTooltip" title="About references" /></li>
                <li><a href="#">RBI LEARNING SERIES</a><img src="i.jpg" class="masterTooltip" title="About RBI Learning series" /></li>
            </ul>
        </li>   
</ul>
</td></tr></table>
</div>

Answer 1

Check the mode in which your IE opens your page. Make sure it is in standard mode. If not, add the following to your html file:

'!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd "'

Answer 2

The only reason I can think of is that IE might not support the things you're trying. I'm no expert at cross-browser support, so I wish I could help you more. I do hope that my answer is helping you in the right direction, though!