Hover on ID show another Div

Question

I have a navbar that shows a sub navbar on hover. I need to have another sub navbar (so a sub sub navbar) show on a button hover in the sub navbar.

All I need to do is change the Display from "None" to "Block" on hover of the ID= preStart.

This is what I have:

.subsubnavbar-content {
  display: none;
  position: absolute;
  left: 300px;
  background-color:  #eee;
  color: white;
  width: 50%;
  z-index: 1;
}


#preStart:hover .subsubnavbar-content{
display: block;
}

This is it. I have // out the css that is not working. What I am trying to do is get the pre-start checklist button to open up the subsubnav bar when hovering. — Steven Hale, Nov 13 '20 at 01:49

score 1 · Accepted Answer · answered Nov 13 '20 at 08:01

You can first have a look at this answer to understand the class selectors better. Now, coming to understanding WHAT is working and WHY is it working. Your subnav-content appears as block on hover of subnav because your subnav-content is a descendent of subnav in the html.

  .subnav:hover .subnav-content {
    display: block;
  }

  <div class="subnav">
    <div class="subnav-content">
      ...
    </div>
  </div>

Whereas your .subsubnavbar-content is NOT a descendent of #preStart in the HTML. For your display: block to work, you need to place your .subsubnavbar-content inside #preStart

<a id="preStart">
   Pre-Start Checklists
   <i class="fa fa-caret-down"></i>
   <div class="subsubnavbar">
     <div class="subsubnavbar-content">
     ...
     </div>
   </div>
 </a>

score 0 · Answer 2 · answered Nov 13 '20 at 01:13

I can't solve this with CSS, but I know how to with JavaScript. Use the code below.

const preStart = document.querySelector("#preStart");
const subsubnavbar = document.querySelector(".subsubnavbar-content");

preStart.onmouseover = function () {
  subsubnavbar.style.display = "block";
}

Hover on ID show another Div

2 Answers2