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或当前版本的当前版本。

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

1 个答案: