Html CSS下拉菜单的父元素在移动到菜单时失去悬停效果

标题很冗长，有点难以理解，但我的想法是我有一个下拉菜单，当产生下拉菜单的主要链接悬停在上面时，它们的背景颜色和文本颜色会发生变化，菜单就会出现。问题是，当您将光标移动到菜单上以单击刚刚出现的链接时，上面的主链接的悬停效果消失。该菜单保持和工程只是罚款，但我想理想的链接，产生的菜单悬停，以保持它的悬停效果，而菜单是向上的

这是我所说的代码

CSS

HTML

---

我只是把它添加到HTML中

.upper-navigation:hover, li:hover {
  background-color: #232a2d;
  display: inline-block;
  color: #0FA0CE;
}

.upper-navigation:hover, li:hover {
  background-color: #232a2d;
  display: inline-block;
  color: #0FA0CE;
}

.upper-navigation:hover, li:hover {
  background-color: #232a2d;
  display: inline-block;
  color: #0FA0CE;
}

.upper-navigation:hover, li:hover {
  background-color: #232a2d;
  display: inline-block;
  color: #0FA0CE;
}