Html 突出显示列表菜单中包含多个项目的单个项目

我有一个导航菜单，我试着做两件事。当我将鼠标悬停在1个列表项上时，我试图突出显示单个项，如果我单击单个项，我试图应用某种颜色或样式，指示该项当前处于焦点或活动状态。如果选择另一个，则当前项目将停用，新选择的项目将变为活动项目

这是我尝试过的CSS，但现在只要我将鼠标悬停在任何列表项上，所有项目都将高亮显示，而不是仅显示一个：

#listContainer{

      margin-top:15px;
    }

#expList ul, li {
    list-style: none;
    margin:0;
    padding:0;
    cursor: pointer;    
}
#expList p {
    margin:0;
    display:block;
}
#expList p:hover {
    background-color:#121212;
}
#expList li {
    line-height:140%;
    text-indent:0px;
    background-position: 1px 555555px;
    padding-left: 20px;
    background-repeat: no-repeat;
    margin-bottom: 5px;
}
#expList ul{
    margin-top: 5px;
}
#expList li:hover{
    background-color: #eee; This is where the problem is
}

/* Collapsed state for list element */
#expList .collapsed {
    background-image: url('https://hosted.compulite.ca/kc/MD/SiteAssets/collapsed.png');
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
#expList .expanded {
    background-image: url('https://hosted.compulite.ca/kc/MD/SiteAssets/expanded.png');
}

---

下面是一个JSFIDLE，其中包含了大部分代码

在css中定义一个活动类，然后使用Jquery应用和删除它

$(function() {
   $("li").click(function() {
      // remove classes from all
      $("li").removeClass("active");
      // add class to the one we clicked
      $(this).addClass("active");
   });
});

---

您必须更准确地确定li项目的目标。由于您的html结构是“ul->li->ul->li with links”，并且您的css只针对包含所有链接的第一个li，因此当鼠标悬停时，它们当然都会应用样式。更正确的css目标是：

#expList ul li:hover{
    background-color: #eee;
}

---

如果您想以活动/焦点状态为目标，则必须使用css伪类选择器，如

：active

。（请在此处阅读更多信息：），或者如果您想在用户继续使用当前页面的同时长期使用它们，请使用jQuery脚本。

您也可以共享您的html吗？对不起，我忘了。我用它添加了一个JSFIDLE，但FIDLE不起作用。我刚刚发布了一个新的，对此很抱歉。它突出显示了整个列表组，而不是单个项目。我们需要在一个工作的JSFIDLE中查看您的代码……它在我的示例中确实有效。嗨，Sebsemillia，我尝试了您的建议，效果更好。但是，当鼠标悬停时，某些li项目仍然会在块中突出显示，而第一个项目不会突出显示：我开始认为这可能是不可能的。我在列表中有列表，我应用于父对象的任何内容都会应用于子对象列表。我可能需要一种新的方法。