Prevent double borders in vertical menu

Question

I am creating a vertical menu, my CSS style means that when I select or hover a button a border is added. The problem is that when hovering the button below the selected button a double border is created (bottom and top), like this:

My code is this:

ul {
  list-style-type: none;
}

.selected {
  background-color: #f9f9f9;
  border: 1px solid #dcdee2;
  border-radius: 1px;
}

.card {
  cursor: pointer;
  padding: 7px 0 7px 20px;
}
 
.card:hover {
  background-color: #f9f9f9;
  border: 1px solid #dcdee2;
  border-radius: 1px; 
}

.selected a {
  font-weight: bold:
}

.card a {
  color: #121212;
}

<ul>
  <li class="card selected">
    <a href="#">Home</a>
  </li>
  <li class="card">
    <a href="#">Information</a>
  </li>
</ul>

How can i fix this?

Answer 1

ul {
  list-style-type: none;
}

.selected {
  background-color: #f9f9f9;
  border: 1px solid #dcdee2;
  border-radius: 1px;
}

.card {
  cursor: pointer;
  padding: 7px 0 7px 20px;
}
 
.card:hover {
  background-color: #f9f9f9;
  border: 1px solid #dcdee2;
  border-radius: 1px; 
}

.selected a {
  font-weight: bold:
}

.card a {
  color: #121212;
}

.selected + .card:hover, .card:not(.selected):hover + .selected {
  border-top: none;
  }
    

<ul>
  <li class="card">
    <a href="#">Home</a>
  </li>
  <li class="selected card">
    <a href="#">Information</a>
  </li>
</ul>

The content shifts a very very slight bit when you hover, but I'm sure you can find a way around that.