Question

我正在尝试将访问状态设为导航栏。这听起来很简单，但我的代码很奇怪。我创建了一个带有下拉菜单的导航栏，我想要一个访问状态，所以我可以删除标题，人们仍然知道它们在哪里。我可能只是忽略了一些东西，但我搜索了许多论坛，youtube和参考书籍，似乎所有的道路都导致了stackoveflow。

以下是我的联系页面中的HTML。

   <div id="nav">
       <div id="nav_wrapper">

        <ul>
            <li><a href="index.html">Home</a></li><li>
            <a href="concept.html">Concept</a></li><li>
            <a href="menu.html">Menu</a></li><li>
            <a href="contact.html">Contact Us</a></li><li>
            <a href="find.html">Find Us<img src="rsz_1wht_arrow.png" alt="small arrow"/></a>
                <ul>
                    <li><a href="catering.html">Catering</a></li>
                    <li><a href="newsletter.html">Newsletter</a></li>
                    <li><a href="events.html">Events</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

这是CSS

#nav{
    background-color: #830300;
    border-radius: 5px;
}
#nav_wrapper {
    width: 900px;
    margin: 0 auto;
    text-align: left;
    border-radius: 5px;
}
#nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
}
#nav ul li {
    display: inline-block;
    width: 900px;
    margin: 0 auto;
    line-height: 100%;
    float: left;
    text-align: center;
    width: 180px;
    background-color: #830300;

}

#nav ul li:hover {
    background-color: #000;
    color: blue;
}
#nav ul li img {
    vertical-align: middle;
    padding-left: 3px;
}
#nav ul li a,visited {
    color: #e6ee17;
    display: block;
    padding: 15px;
    text-decoration: none;
}
#nav ul li a:hover {
    color: blue;
    text-decoration: none;
}
#nav ul li:hover ul {
    display: block;
}
#nav ul ul {
    display: none;
    position: absolute;
    background-color: #830300;
    border: 5px solid #e6ee17;
    border-top: 0;
    margin-left: -5px;
}
#nav ul ul li {
    display: block;
}

#nav ul ul li a:hover {
    color: blue;
}

任何帮助都会很棒谢谢！附：我使用通用地址，并且出于显而易见的原因取出了我的页脚。

Answer 1

根据您的代码，您可以向li添加一个类，使其保持“活动”状态。我以“contact.html”为例。

<强> HTML

<div id="nav">
       <div id="nav_wrapper">

        <ul>
            <li><a href="index.html">Home</a></li><li>
            <a href="concept.html">Concept</a></li><li>
            <a href="menu.html">Menu</a></li><li class="current-page">
            <a href="contact.html">Contact Us</a></li><li>
            <a href="find.html">Find Us<img src="rsz_1wht_arrow.png" alt="small arrow"/></a>
                <ul>
                    <li><a href="catering.html">Catering</a></li>
                    <li><a href="newsletter.html">Newsletter</a></li>
                    <li><a href="events.html">Events</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

<强> CSS

#nav ul li:hover,
#nav ul li.current-page {
    background-color: #000;
    color: blue;
}

因此，您只需在每个HTML文件的相应链接中添加一个类current-page。

小提琴： http://jsfiddle.net/zu6bjmkb/

我正试图让访问状态到我的导航栏。这听起来很简单，但我的代码很奇怪

1 个答案: