Html 从父元素继承样式的元素，即使以其他方式显式定义

我有两层导航菜单。使用CSS

：hover

类，我隐藏了子导航菜单，直到您将鼠标悬停在相应的父菜单上。出于某种原因，子导航菜单的文本样式与父导航相同，尽管我已明确添加了其他规则。有人能解释一下我做错了什么吗

简而言之：为什么我的

nav.sub_导航菜单项不是一个

选择器并没有按我的预期应用

这是我的HTML：

<nav id="main_navigation">

    <menuitem><a href="">Articles</a></menuitem>
    <nav class="sub_navigation">
        <menuitem><a href="">All</a></menuitem>
        <menuitem><a href="">Programming</a></menuitem>
        <menuitem><a href="">Security</a></menuitem>
        <menuitem><a href="">Design</a></menuitem>
        <menuitem><a href="">Productivity</a></menuitem>
        <menuitem><a href="">Miscellaneous</a></menuitem>
    </nav>

    <menuitem><a href="">About</a></menuitem>
    <nav class="sub_navigation">
        <menuitem><a href="">Biography</a></menuitem>
        <menuitem><a href="">Freelancing</a></menuitem>
        <menuitem><a href="">Resume</a></menuitem>
        <menuitem><a href="">Contact Information</a></menuitem>
    </nav>

    <menuitem><a href="">Projects</a></menuitem>
    <nav class="sub_navigation">
        <menuitem><a href="">Gallery</a></menuitem>
        <menuitem><a href="">Current Work</a></menuitem>
        <menuitem><a href="">Side Projects</a></menuitem>
        <menuitem><a href="">Github Repositories</a></menuitem>
    </nav>

</nav>

---

将规则限制到直接的基础子项：

nav#main_navigation>menuitem>a

和

nav.sub_navigation>menuitem>a

---

你在

主导航

规则中使用了一个id，这就是为什么它更具体，导致了一个id，并覆盖了

子导航

规则。

大多数浏览器不支持

菜单项

。它可以很容易地成为

div

标记，我只针对一个浏览器。

menuitem

是什么导致了问题？如果是这样的话，它会不会无法设计主导航？不知道……但是，它没有在正确的上下文中使用，请参阅：@Paulie_D:谢谢，我会解决的。这很有效，也解决了我在飞行中遇到的问题。非常感谢。

nav#main_navigation {
    position: relative;
    height: 35px;
    width: 100%;
    background-color: #111;
    text-align: center;
}

nav#main_navigation menuitem a {
    padding: 0 12px;
    color: #a40003;
    font-size: 25px;
    font-family: Comfortaa;
    text-decoration: none;
    text-transform: lowercase;
    letter-spacing: 3px;
}

nav#main_navigation menuitem a:hover {
    color: #eee;
}

nav.sub_navigation {
    display: none;
    position: absolute;
    width: 100%;
    top: 35px;
    left: 0;
}

nav.sub_navigation menuitem a {
    padding: 0 7px;
    color: black;
    font-size: 14px;
    font-family: Comfortaa;
    text-decoration: none;
    text-transform: lowercase;
    letter-spacing: 2px;
}

nav.sub_navigation menuitem a:hover {
    color: #003351;
}

/* to show the appropriate sub-navigation */
nav#main_navigation menuitem:hover + nav.sub_navigation {
    display: block;
}