Deleting border-bottom from previous item on hover

Question

I have this dropdown menu with categories and locations

categories:

news
politics
economy
health
education

locations (sub-categories)

europe
asia
africa
oceania
north america
South America

By default each category have a border-bottom:1px solid #121212, so obviously when you hover these categories (divs), and the sub-categories (locations) opens on hover, you will see that border too.

I want to have no borders on the selected (hovered) category, but whatever I do I can not get rid of this border, displayed on top of the hovered category, because it is not set on the hovered category but by default in the previous non-hovered category as border-bottom.

I do not know how to set the border on the category just above the selected one (hovered with black background and white text), to border:none

I think it could be done with some nth-child but maybe there is another way

Here is the HTML

<div id="menu" class="active">
  <div class="categories" tabindex="0">
    <div class="touch">News</div>
    <div class="locations">
      <a href="link.html">Europe</a>
      <a href="link.html">Asia</a>
      <a href="link.html">Africa</a>
      <a href="link.html">Oceania</a>
      <a href="link.html">North America</a>
      <a href="link.html">South America</a>
    </div>
  </div>

  <div class="categories" tabindex="0">
    <div class="touch">Politics</div>
    <div class="locations">
      <a href="link.html">Europe</a>
      <a href="link.html">Asia</a>
      <a href="link.html">Africa</a>
      <a href="link.html">Oceania</a>
      <a href="link.html">North America</a>
      <a href="link.html">South America</a>
    </div>
  </div>

  <div class="categories" tabindex="0">
    <div class="touch">Economy</div>
    <div class="locations">
      <a href="link.html">Europe</a>
      <a href="link.html">Asia</a>
      <a href="link.html">Africa</a>
      <a href="link.html">Oceania</a>
      <a href="link.html">North America</a>
      <a href="link.html">South America</a>
    </div>
  </div>

  <div class="categories" tabindex="0">
    <div class="touch">Health</div>
    <div class="locations">
      <a href="link.html">Europe</a>
      <a href="link.html">Asia</a>
      <a href="link.html">Africa</a>
      <a href="link.html">Oceania</a>
      <a href="link.html">North America</a>
      <a href="link.html">South America</a>
    </div>
  </div>

  <div class="categories" tabindex="0">
    <div class="touch">Education</div>
    <div class="locations">
      <a href="link.html">Europe</a>
      <a href="link.html">Asia</a>
      <a href="link.html">Africa</a>
      <a href="link.html">Oceania</a>
      <a href="link.html">North America</a>
      <a href="link.html">South America</a>
    </div>
  </div>

  <div class="categories" tabindex="0">
    <div class="touch">Culture</div>
    <div class="locations">
      <a href="link.html">Europe</a>
      <a href="link.html">Asia</a>
      <a href="link.html">Africa</a>
      <a href="link.html">Oceania</a>
      <a href="link.html">North America</a>
      <a href="link.html">South America</a>
    </div>
  </div>
</div>

And here is the CSS

a {
  color: #121212;
  text-decoration: none;
}
a:hover {
  color: #e5633f;
  text-decoration: none;
}

#menu {
  grid-area: menu;
  width: 100%;
  height: auto;
  text-align: left;
  border-bottom: 3px solid #121212;
  background-color: inherit;
  position: sticky;
  top: 0;
  cursor: pointer;
  z-index: 8;
}
.categories {
  display: block;
  position: relative;
  width: 92%;
  height: 42px;
  line-height: 42px;
  margin: 0 auto;
  overflow: hidden;
  text-align: left;
  border-bottom: 1px dotted #121212;
  font-size: 1em;
  text-transform: uppercase;
  font-weight: 400;
}
.categories .touch {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
}
.categories:hover .touch {
  color: #ffffff;
  background-color: #121212;
  padding-left: 25px;
}
.categories:hover .touch:before {
  content: "▪ News ▪ ";
}
.categories .touch:before {
  content: "▪ ";
}
.categories:last-of-type {
  border: 0;
}
.categories .touch:hover:before {
  content: "▪ News ▪ ";
}
.categories:first-of-type .touch:hover:before {
  content: "▪ Super Times ▪ ";
}
.categories:first-of-type:hover .touch:before {
  content: "▪ Super Times ▪ ";
}
.locations {
  display: none;
  position: relative;
  width: auto;
  height: auto;
  text-align: left;
  overflow: hidden;
  padding-left: 25px;
  padding-right: 25px;
  margin: 0 auto;
}
.locations a {
  display: block;
  font-size: 0.938em;
  color: #121212;
  text-transform: capitalize;
  text-align: left;
  height: 38px;
  line-height: 38px;
  border-bottom: 1px dotted #121212;
}
.locations a:hover {
  -webkit-tap-highlight-color: #e5633f;
  background-color: inherit;
}
.locations a:active {
  color: #e5633f;
  background-color: inherit;
}
.locations a:last-child {
  border: 0;
}
.categories:hover .locations {
  display: block;
  animation: supertimes 500ms ease-in-out forwards;
  transform-origin: top center;
}
.locations a:before {
  content: "• ";
}
@keyframes supertimes {
  0% {
    transform: scaleY(0);
  }
  80% {
    transform: scaleY(1.1);
  }
  100% {
    transform: scaleY(1);
  }
}

I also fixed a Codepen to play around with the code https://codepen.io/familias/pen/jOQLRjp

How to fix this?