Question

我正在为一个企业创建一个非常简单的网站（我对这个领域不熟悉），我的菜单在除IE之外的每个浏览器中都能正常工作，当它悬停在链接上时它保持活跃的外观。我正在使用HTML5和CSS3。

HTML

    <nav><ul>
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="corporate.html">Corporate Info</a></li>
        <li><a href="employment.html">Employment</a></li>
        <li><a href="#">
        Login</a></li>
        <li><a href="#">Forums</a></li>
    </ul></nav>

CSS

    .main-header nav {
    background-color: #DCDCDC;
    height: 40px;
}

.main-header nav ul{
    list-style: none;
    margin: 0 auto;
}

.main-header nav ul li {
    float: left;
    display: inline;
}

.main-header nav a:link, .main-header nav a:visited {
    color: #023878;
    display: inline-block;
    padding: 10px 25px;
    height: 20px;
}

.main-header nav a:hover, .main-header nav a:active,
.main-header nav .active a:link, .main-header a:visited {
    background-color: #B6C2C7;
    color: #023878;
    text-shadow: none;
}

.main-header nav ul li a {
    border-radius: 5px;
}

Answer 1

您指的是Home链接吗？如果是这样，应用于li元素的 active 类就是这样做的。您可以添加活动类以显示您当前所在的页面。尝试删除活动类，看看它是否符合您的要求。因此，在HTML中更改此行：

<li class="active"><a href="index.html">Home</a></li>

到此：

<li><a href="index.html">Home</a></li>

导航菜单坚持在IE浏览器中

1 个答案: