当下面的项目悬停时，菜单会突出显示所有活动的子类别项目（joomla / mosets树）

Question

我有一个使用Mosets Tree的Joomla网站作为商业目录。在右侧列出所有类别。如果项目的子类别被扩展，例如在GENERAL SERVICES下并滚动下一个菜单项（政府机构），则上面的所有子类别项都会突出显示，这显然不应该发生。

http://www.downtownnewwest.ca/index.php/directory/general-services

CSS看起来像这样：

#sidebar ul {
  list-style:none;
  margin: 0;
  padding-left:0;
}

#sidebar .active ul li a {
  text-transform: none;
  margin-left: 10px;
}


#sidebar ul.menu li a  {
  display: block;
  width: 190px;
  color: #00215b;
  padding: 10px 20px 10px 20px;
  border-bottom: 1pt solid #ccc;
  text-decoration: none;
}

#sidebar ul.menu li a:hover  {
   background: #00215b;
   color: #fff;
}

提前致谢。

Answer 1

您将使用direct child combinator, >，以便仅选择li的直接ul.menu子元素。此外，锚元素应为inline-block，而不是block：

这将解决问题：

#sidebar ul.menu > li > a {
    width: 190px;
    color: #00215b;
    padding: 10px 20px 10px 20px;
    border-bottom: 1pt solid #ccc;
    text-decoration: none;
    display: inline-block;
}