targeting a div inside a menu structure

Question

I can not properly target a div if it is not in the same li item with the trigger div.

my CSS is:

#menu .hide {
  display: none;
    width: 200px;
    height: 320px;
}

    
#menu .subsubmenu:hover + .hide {
  display: block;
    
}

and the html is:

<ul class="column2">

<li><h3>main title</h3></li>

<li>
<div class="subsubmenu"><a href="#">title1</a></div>
</li> 
                        
<li class="">
<div class="subsubmenu"><a href="#">title2</a></div>                    
</li> 

</ul>
                    
                    
                                    
<ul class="column3">
                        
<div class="hide"> <img src="ddmenu/img1.jpg"> </div>
                         
</ul>

I want the .hide class div in column3 be visible when I roll over the .subsubmenu class divs in column3. I an sure the solution has to do with sybling selectors but I could not put the syntax right :(

What you are wanting is not possible, you have one element that you want to react when a different element is hovered. Both of these elements are nested inside their own parent elements, so there is no CSS selector that can target what you are looking for. perhaps a JS solution would be best here. — Chris Barr, Apr 04 '23 at 17:23

targeting a div inside a menu structure

0 Answers0