Css 带有悬停父项的下拉菜单

我想要简单的下拉菜单。但我有一个问题。当我将鼠标悬停在拖放项（拖放菜单项）上时，我希望父元素（拖放菜单父元素）用黑色着色，但它是白色的。我不能很好地解释它。您可以在此处查看->

添加：

ul#cat-nav li:hover a{
    color: #000;
}

加：

---

我想这就是你需要的：

HTML:

解释

我补充的是：

#cat-nav > li:hover a{
    color:#000;
}

“>”表示直接子项…因此，将光标悬停在#cat nav上时，其直接子项将为标记指定黑色

您还可以编写：

#cat nav.drop menu parent:hover>a{color:#000；}

---

实际上，这第二个比特是一个更好的选择。

我想这就是你需要的：

HTML:

解释

我补充的是：

#cat-nav > li:hover a{
    color:#000;
}

“>”表示直接子项…因此，将光标悬停在#cat nav上时，其直接子项将为标记指定黑色

您还可以编写：

#cat nav.drop menu parent:hover>a{color:#000；}

---

事实上，这第二位是一个更好的选择。

不确定我是否理解你的意思（？），但这里有一个例子。这就是你的意思吗

---

​

不确定我是否理解你的意思（？），但这里有一个例子。这就是你的意思吗

---

​

它起作用了！这很奇怪，因为我试过这个。显然，我写错了。谢谢它起作用了！这很奇怪，因为我试过这个。显然，我写错了。谢谢

#cat-nav > li:hover a{
    color:#000;
}

nav {
    background: #000;
}

#cat-nav {
    text-align: center;
    background-color: #0f0609, #0f0609;
    background-image: url(cat-nav-bg.jpg), url(cat-nav-bg-bottom.jpg);
    background-repeat: no-repeat, repeat-y;
    margin-top: -8px;
    display: block;
}

#cat-nav:after {
    content: " ";
    display: block;
    clear: both;

    width: 81%;
    padding-top: 8px;
    margin: 0 auto;
    background: url(teeth.png) repeat-x;
}

ul#cat-nav > li {
    text-align: center;
    display: inline-block;

}

#cat-nav a:link { color: #fff; text-decoration: none; padding: 10px; display: inline-block;}
#cat-nav a:hover { color: #fff; text-decoration: none; }
#cat-nav a:visited { color: #fff; text-decoration: none; }
#cat-nav a:active { color: #fff; text-decoration: none; }

ul .drop-menu-items  {
    position: absolute;
    display: none;
    background: #000 url(drop-menu-bg.png) bottom repeat-x;
    -webkit-box-shadow: 0px 5px 5px #8f8f8f;
    -moz-box-shadow:    0px 5px 5px #8f8f8f);
    box-shadow:         0px 5px 5px #8f8f8f;
    border-radius: 0 10px 10px 10px;

}

ul.drop-menu-items  li{
    background: url(drop-menu-bullet.png) no-repeat 5px center;
    float: none;
    position: relative;
    color: #000;
    padding: 5px 15px;
    margin: 0 10px; 
    border-bottom: 1px dotted #cecece;
}

ul.drop-menu-items  li:hover {
    background: #000 url(drop-menu-bullet.png) no-repeat  5px center;
} 

.drop-menu-parent:hover .drop-menu-items {
    display: block;
    z-index: 1000;
}

ul#cat-nav li   a:hover {
    background: #000;
    border-radius: 5px;
    color: #fff;
    /* padding-top: 5px; */

}

#cat-nav .drop-menu-items li a {
    color:     #fff;
}


#cat-nav .drop-menu-items li:hover a {
    text-decoration: underline;
    background: none;
    color:     #fff;
}

.drop-menu-parent:hover {
    background: #000;
    background-color: #000;
    border-radius: 5px 5px 0 0;

}