Make a radio button look like a menu item

Question

Is there a way to make the radio buttons in this group look and behave like the menu items (first item)?

.menu {
  display: flex;
  flex-direction: row;

  border: 0px solid gray;
  justify-content: space-around;
}
input[type="radio"]  {
  display: block;
  background-color: blue;
  border: 1px solid red;
  align-items: center;
}
.item {
  padding: 8px 23px;
}
.item:hover {
  background-color: #e6e6e6;
}
.item.selected {
  border-bottom: 3px solid #D6d6d6;
}

<div class="menu">
  <div class="item selected">
    Item 1
  </div>
  <input type=radio name=group class="item">
    Item 2
  </input>
  <input type=radio name=group class="item">
    <label>Item 3</label>
  </input>
  <input type=radio name=group class="item">
    Item 4
  </input>
  <input type=radio name=group class="item">
    Item 5
  </input>
 </div>

Answer 1

something like that... ?

nav input[type=radio]
  {
  display : none;
  }
nav span 
  {
  display       : inline-block;
  border-bottom : 4px solid transparent;
  padding       : 3px 7px;
  }
nav span:hover
  {
  background-color : #e6e6e6;
  }
nav input[type=radio]:checked + span
  {
  border-bottom-color: darkslategray;
  }

<nav>
  <label>
    <input type="radio" name=group value="I1" checked >
    <span>Item 1</span> 
  </label>
  <label>
    <input type="radio" name=group value="I2">
    <span>Item 2</span> 
  </label>
  <label>
    <input type="radio" name=group value="I3">
    <span>Item 3</span> 
  </label>
  <label>
    <input type="radio" name=group value="I4">
    <span>Item 4</span> 
  </label>
  <label>
    <input type="radio" name=group value="I5">
    <span>Item 5</span> 
  </label>
</nav>