Menu and submenus not showing on Internet Explorer

Question

I am working on a menu that looks like this:

<nav>
<ul>
    <li><a href="index.php">Home</a></li>

    <li><a href="#">Expenses</a>
        <ul>
            <li><a href="view.php">View My Expenses</a></li>    
            <li><a href="employeeExpense.php">View Expenses</a></li>    

            <li> <a href="#">View Deconts </a>
                <ul>
                    <li><a href="viewAllDecont.php">Single Deconts</a></li>                                 
                    <li><a href="viewDecontsForAll.php">View All Deconts</a></li>
                </ul>
            </li>   
            <li> <a href="#">Add Expenses </a>
                <ul>
                    <li><a href="soccer.php">Soccer/Tennis Expenses</a></li>
                    <li><a href="gym.php">Gym Expenses</a></li>
                    <li><a href="coffeeTea.php">Coffee/Tea Expense</a></li> 
                </ul>
            </li>
    </li>               
</ul>

It works perfectly on chrome and firefox, it does not work on IE.

The navigation CSS looks something like this:

nav {   
text-align: center;
}

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 20px;
    border-radius: 10px;  
    list-style: none;
    position: relative;
    display: inline-table;
    z-index: 9999;

}
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 40px;
        color: #757575; text-decoration: none;
    }


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: 15px 40px;
            color: #fff;
        }   
            nav ul ul li a:hover {
                background: #4b545f;
            }

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

Am I using deprecated functions ? I know the -moz- tag works for Mozilla Firefox and the -webkit- works for Chrome, but it initially worked. I must have updated IE or something. I am using IE 9.

Answer 1

Two things I noticed.

1.) Your code looks fine except for the lack of an ending tag. This could have been a copy paste issue.

2.) IE8 and prior do not work with the nav tag. So have you verified that you are running in IE9 mode? Open developer tools to make sure (F12) in IE. Make sure both document and browser mode are not in compability mode and set to IE9 or whatever your current version is at the moment.