Javascript 文本更改后的第n个子项混淆

我正在使用javascript更改我的网站语言。另外，我正在使用CSS

nth child

来设计我的菜单，您可以在本文中看到

一旦文本更改为英语，它的效果就很好，但一旦文本更改为希伯来语，基于第n个子菜单的设计将在菜单的第一个子菜单上失败

我如何将第一个孩子的设计按照正确的顺序（如英文文本）进行修改

ul li:nth-child(1) a:before
{
    background-color: yellow;
}

ul li:nth-child(1) a:after
{
    background-color: red;
}

ul li:nth-child(2) a:before
{
    background-color: #00e2ff;
}

ul li:nth-child(2) a:after
{
    background-color: #89ff00;
}

ul li:nth-child(3) a:before
{
    background-color: purple;
}

ul li:nth-child(3) a:after
{
    background-color: palevioletred;
}
ul li:nth-child(4) a:before
{
    background-color: darkblue;
}

ul li:nth-child(4) a:after
{
    background-color: dimgrey;
}
ul li:nth-child(5) a:before
{
    background-color: #ff0000;
}

ul li:nth-child(5) a:after
{
    background-color: #990000;
}
ul li a:hover:before, ul li a:hover:after
{
    transform: scale(1);
}

---

在这种样式中，需要将

display:inline block

添加到

a

元素中。我还删除了样式

行高：70px用于测试：

.navigation-bar li a {
  color: #000000;
  text-decoration: none;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
  padding: 10px 20px;
  /*line-height: 70px;*/
  transition: 0.2s ease color;
  position:relative;
  display: inline-block; /* add this style */
}

在这种样式中，需要将
display:inline block
添加到
a
元素中。我还删除了样式
行高：70px用于测试：

.navigation-bar li a {
  color: #000000;
  text-decoration: none;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
  padding: 10px 20px;
  /*line-height: 70px;*/
  transition: 0.2s ease color;
  position:relative;
  display: inline-block; /* add this style */
}

显示：列表项上的内联块
工作@ManojKumar谢谢你，成功了！请写下答案。
在列表项上显示：内联块
@ManojKumar谢谢你，成功了！请写下答案。