Internet Explorer 上未显示菜单和子菜单

Question

我正在制作一个如下所示的菜单：

<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>

它在 chrome 和 firefox 上完美运行，在 IE 上无法运行。

导航 CSS 看起来像这样：

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;
}

我是否使用过时的功能？我知道 -moz- 标签适用于 Mozilla Firefox，而 -webkit- 适用于 Chrome，但它最初是有效的。我一定是更新了 IE 什么的。我使用的是 IE 9。

Answer 1

我注意到了两件事。

1.) 您的代码看起来不错，只是缺少结束标记。这可能是复制粘贴问题。

2.) IE8 和之前的版本不能使用 nav 标签。那么你确认你在IE9模式下运行了吗？在 IE 中打开开发人员工具以确保 (F12)。确保文档和浏览器模式均未处于兼容模式并设置为 IE9 或您当前的任何版本。