html - Trying to get drop down to appear when hovering single menu item, not entire menu -

i have section flex box. trying drop down menu appear when mouse on vs div. unfortunately, div inside section tag , drop down menu won't appear.

the way code set causes drop down menu appear when mouse on part of section. want drop down menu appear when mouse on vs. div.

here image of 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: suggestions on aligning drop down directly below vs. div , suggestions selecting drop down items when mouse off vs. div appreciated. when mouse off section dropdown disappears , user unable select anything.

in code have drop-down menu positioned sibling main menu. it's better nest drop-down within related main menu item. try this:

ul {    display: flex;    list-style-type: none;    margin-top: 20px;  }  ul > li:hover {    background-color: aqua;    cursor: pointer;  }  .dropdownvs > ul {    display: none;  }  .dropdownvs:hover > ul {    display: flex;    flex-direction: column;    padding-left: 0;  }  .home {    margin-left: 50px;  }  .line {    flex: 1;  }  .m {    margin-right: 30px;  }  .logout {    margin-right: 50px;  }

<ul class="dropdown">    <li class="home">home</li>    <li class="line"><hr></li>    <li class="m">reports</li>    <li class="m dropdownvs">vs      <ul>        <li>name 1</li>        <li>name 2</li>        <li>name 3</li>      </ul>    </li>    <li class="logout"><a href="url">log out </a>      <li>  </ul>

for additional guidance, see menu here:

(note: it's basic example built while using non-flex layout. figured aspects of may helpful you.)

#main-nav > ul {    list-style-type: none;    padding: 0;    border: 1px solid #999;    position: absolute;    top: 0;  }        #main-nav > ul > li {    float: left;    background-color: #000;  }       .main-nav-sub {    list-style-type: none;    padding: 0;    margin: 0;  }        #main-nav > ul > li+li {    border-left: 1px solid #999;  }        .main-nav-sub > li {    border-bottom: 1px solid #999;    border-right: 1px solid #999;    border-left: 1px solid #999;    background-color: #000;  }        .main-nav-sub > li:first-child {    border-top: 1px solid #999;  }        #main-nav > ul > li > a,   .main-nav-sub > li > {    text-decoration: none;    white-space: nowrap;    display: block;    color: #fff;    font-family: verdana, sans-serif;    font-size: .8em;    font-weight: bold;    padding: 10px 20px;  }        #main-nav > ul > li:hover > {    color: #000;    background-color: #fff;  }        .main-nav-sub > li:hover > {    color: #000;    background-color: #fff;  }        .main-nav-sub {    position: absolute;    z-index: -999;    opacity: 0;    filter: alpha(opacity=0);    /* ie older versions */          zoom: 1;               /* ie older versions */      }        #main-nav > ul > li:hover > .main-nav-sub {    z-index: 100;    opacity: 1;    filter: alpha(opacity=100);  /* ie older versions */          zoom: 1;               /* ie older versions */          -webkit-transition: .5s ease-in;          -moz-transition: .5s ease-in;          -ms-transition: .5s ease-in;          -o-transition: .5s ease-in;          transition: .5s ease-in;      }

<nav id="main-nav">    <ul>      <li><a href="#">menu 1</a></li>      <li><a href="#">menu 2</a>        <ul class="main-nav-sub">          <li><a href="#">menu 2.1</a></li>          <li><a href="#">menu 2.2</a></li>          <li><a href="#">menu 2.3</a></li>          <li><a href="#">menu 2.4</a></li>          <li><a href="#">menu 2.5</a></li>        </ul>      </li>      <li><a href="#">menu 3</a>        <ul class="main-nav-sub">          <li><a href="#">menu 3.1</a></li>          <li><a href="#">menu 3.2</a></li>          <li><a href="#">menu 3.3</a></li>        </ul>      </li>      <li><a href="#">menu 4</a></li>      <li><a href="#">menu 5</a>        <ul class="main-nav-sub">          <li><a href="#">menu 5.1</a></li>          <li><a href="#">menu 5.2</a></li>          <li><a href="#">menu 5.3</a></li>          <li><a href="#">menu 5.4</a></li>        </ul>      </li>    </ul>  </nav>