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

ray Source

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.

enter image description here

.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.

htmlcsscss3flexbox

Answers

answered 2 years ago Michael_B #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:

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 my menu here:

(Note: It's just a basic example I built a while back using non-flex layout. Figured some aspects of it may be helpful to 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 > a {
  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 > a {
  color: #000;
  background-color: #fff;
}
    
.main-nav-sub > li:hover > a {
  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: all .5s ease-in;
        -moz-transition: all .5s ease-in;
        -ms-transition: all .5s ease-in;
        -o-transition: all .5s ease-in;
        transition: all .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>

comments powered by Disqus