在菜单栏上悬停时链接消失

Question

我有一个菜单栏，其中包含一些下拉图标。其中一些在图标下有子菜单，一些在图标下有子菜单。

例如，这是一个子子菜单的示例

 Archives
  |
  |____ 2017
  |      |_______ Award
  |      |_______ Pictures
  |
  |____ 2016

当我点击存档菜单时，我可以在下拉导航下的子菜单中看到2017和2016。

当我将鼠标悬停在“奖励”和“图片”上时，但当我将鼠标悬停在“奖励”或“图片”上时，子菜单将消失。例如，如果我将鼠标悬停在“奖”上，“奖”就消失了，或者我可以说字体颜色变白了，因为我的背景是白色的，当我将背景改为其他颜色时，我就可以看到图标了。所以它的颜色变成了白色，我怎么才能阻止它呢？下面是我的代码：

​

$(document).ready(function() {
  $('.dropdown-menu a.test').on("hover", function(e) {
    $("div.li2017Sub").show();
  });
});

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="liPastEvents" class="dropdown" runat="server">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Past Events<i class="fa fa-angle-down"></i></a>
  <ul class="dropdown-menu">
    <li id="li2017"><a class="test" href="#">2017</a></li>
    <ul>
      <div class="li2017Sub" style="display: none ;">
        <li><a href="http:\\google.com">Pictures</a></li>
        <li><a href="#">Award Winners</a></li>
      </div>
    </ul>
    <li id="li2016" runat="server"><a href="/apps/abstractBook/abstractBook2017.aspx">2016</a></li>
  </ul>
</li>

​

Answer 1

如下所示创建css类：

.abc:hover { color: red; }

然后将这个类添加到<li>元素的<a>标记中，如下所示：

<li><a class="abc" href="http:\\google.com">Pictures</a></li>
<li><a class="abc" href="#">Award Winners</a></li>