Get drop down to appear when hovering single menu item, not entire menu

Question

I currently have a section that is a flex box. I am trying to get a drop down menu to appear when I mouse over the Vs div. Unfortunately, this div is inside a section tag and the drop down menu won't appear.

The way the code is currently set up causes the drop down menu to appear when I mouse over any part of the section. I want the drop down menu to only appear when I mouse over the Vs. div.

Here is an image of the section.

.line {
  height: 4px;
  flex: 1;
  background: red;
  margin: 0 10px;
}
section {
  display: flex;
  align-items: center;
}
.home {
  margin-left: 50px;
}
.m {
  margin-right: 30px;
}
.logout {
  margin-right: 50px;
}
ul {
  list-style-type: none;
  margin-top: 20px;
}
.dropDown:hover ~ .dropDownContent {
  display: block;
}
.dropDownContent {
  display: none;
}

<section class="dropDown">
  <div class="home">Home</div>
  <div class="line"></div>
  <div class="m">Reports</div>
  <div class="m dropDownVs">Vs.</div>
  <div class="logout"> <a href="url"> Log Out </a> 
  </div>
</section>

<div class="dropDownContent">
  <ul>
    <li>name 1</li>
    <li>name 2</li>
    <li>name 3</li>
  </ul>
</div>

Bonus: Any suggestions on aligning the drop down directly below the Vs. div and suggestions for selecting the drop down items when the mouse is off the Vs. div would be appreciated. Currently when I mouse off the section the dropdown disappears and a user is unable to select anything.

Answer 1

In your code you have the drop-down menu positioned as a sibling to the main menu. It's better to nest the drop-down within the related main menu item. Try this:

.dropDownVs:hover .dropDownContent {
  display: block;
  position: absolute;
}

.dropDownContent {
  display: none;
}

.line {
  height: 4px;
  flex: 1;
  background: red;
  margin: 0 10px;
}

section {
  display: flex;
  align-items: center;
  position: relative;
}

.home {
  margin-left: 50px;
}

.m {
  margin-right: 30px;
}

.logout {
  margin-right: 50px;
}

ul {
  padding: 0;
  list-style-type: none;
}

<section class="dropDown">
  <div class="home">Home</div>
  <div class="line"></div>
  <div class="m">Reports</div>
  <div class="m dropDownVs">Vs.
    <ul class="dropDownContent">
      <li>name 1</li>
      <li>name 2</li>
      <li>name 3</li>
    </ul>
  </div>
  <div class="logout"> <a href="url"> Log Out </a>
  </div>
</section>