Question

我有一个菜单，其中包含以下形式的链接，其中我试图突出显示当前菜单项。我似乎无法让它工作。请告知我做错了什么

HTML

<body id="home">

                <div id="topMenu">
                    <div class="nav-home" id="topMenuBlock"><a href="" id="home"><p>Home</p></a></div>
                    <div id="nav-about"><a href="" id="about"><p>About</p></a></div>
                    <div id="nav-rates"><a href="" id="rates"><p>Rates</p></a></div>
                    <div id="nav-faq"><a href="" id="faq"><p>FAQ</p></a></div>
                    <div id="nav-contact"><a href="" id="contactus"><p>Contact</p></a></div>
                    <div id="nav-careers"><a href="careers.html" id="contactus"><p>Careers</p></a></div>
                </div>

                <div id="rightTopMenu"></div>
        </div>...other stuff</body>

然后对于CSS，我有以下内容：

#home a.nav-home{ border-bottom:2px solid white; }

链接是否必须在列表中，或者我可以将它们保留在div中，如果是，我该如何使其工作？

感谢。

Answer 1

你这里有点乱。

链接是否必须在列表中，或者我可以将它们留在div中吗？

他们没有，但他们可能应该。没有充分的理由使用您选择的奇怪标记，您应该考虑切换到列表和<li>标记。

重复ID的问题

您有<body id="home">和<a href="" id="home">
您还有几个id="topMenuBlock"的实例（我看到您在编辑中修复此问题。）

您不能拥有多个具有相同ID的元素。 id属性必须始终是唯一的。如果有的话，请改用类名。

您正在使用此选择器：#home a.nav-home {}但它与任何内容都不匹配。没有<a class="nav-home">。你可以使用类似的东西：

#home {}因为那是您想要的id元素的<a>
.nav-home a {} - 使用<a>

class="nav-home"

Answer 2

也许你有ids和类的概念混淆了。 Ids应该唯一地标识HTML元素，而类可以根据您的喜好使用多次。现在，您有6个ID为#topMenuBlock的元素。你应该做一个.topMenuBlock课程。我也会创建一个#nav-home id而不是一个类，因为每个页面上只应该有一个这样的元素。

其次，您的<p>代码中不需要<a>个代码。实际上，这是违反HTML标准的，因为锚是内联元素，而段落是块级元素。

最后，设置边框的CSS选择器不正确，因为.nav-home div不包含在<a>元素中。请改用此CSS（假设您将nav-home更改为id而不是类）：

#nav-home{ border-bottom:2px solid white; }

解决这些问题然后看看会发生什么。如果您不熟悉HTML和CSS，我建议您阅读一些教程，例如http://www.w3schools.com/中的教程。

Answer 3

您的班级标识符应位于<a />标记

中

你有

<div class="nav-home" id="topMenuBlock"><a href="" id="home"><p>Home</p></a></div>

但你想要

<div class="something" id="topMenuBlock"><a class = "nav-home" href="" id="home"><p>Home</p></a></div>

相应地修改你的CSS类。

CSS：突出显示当前菜单项

3 个答案:

重复ID的问题