Display a div container when hover over menu item using CSS

JackB 0
Viewed 32

I have read other articles on this and I am wondering what it is that I'm doing wrong.

I have a container I wish to display when a menu item is hovered over. Here is the container.

<section class="mega_menu_container">
                    
    <div class="mega_menu_outer">
                            
        <div class="mega_menu_inner">
                            
            Inner MEGA MENU

        </div>

    </div>

</section>

Here is the Menu container

<a href="#" class="menu_item1"><div class="menu_item1"><Strong>Item</Strong></div></a>

Here is the CSS I am using to control it.

.mega_menu_container {
    width: 100%; position: fixed; z-index: 99999999;
    opacity: 0.0;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}

.menu_item1:hover + .mega_menu_container {
    opacity: 1.0;
}

.menu_item1{flex-direction: row;}

I really have tried with other answers.

Thanks for your help. :)

css html
1 Answers

Your HTML structure is not clear from the question above, but I guess the problem is that .mega_menu_container does not come immediately after .menu_item1.

Use + only if .mega_menu_container comes immediately after .menu_item1.

See the snippet below.

.mega_menu_container {
  width: 100%;
  position: fixed;
  z-index: 99999999;
  opacity: 0.0;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

.menu_item1:hover + .mega_menu_container {
  opacity: 1.0;
}

.menu_item1 {
  flex-direction: row;
}
<div class="menu_item1">Hover me</div>
<div class="mega_menu_container">Lorem ipsum</div>

<br>
<br>
<br>

<div class="menu_item1">Hover me - it will not work</div>
<div class="element_inbetween"></div>
<div class="mega_menu_container">Lorem ipsum</div>

EDIT 1

Use ~ if there are other elements between .mega_menu_container and .menu_item1.

See the snippet below.

.mega_menu_container {
  width: 100%;
  position: fixed;
  z-index: 99999999;
  opacity: 0.0;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

.menu_item1:hover ~ .mega_menu_container {
  opacity: 1.0;
}

.menu_item1 {
  flex-direction: row;
}
<div class="menu_item1">Hover me</div>
<div class="element_inbetween"></div>
<div class="mega_menu_container">Lorem ipsum</div>

EDIT 2

If none of the above works, you need to use JavaScript.

See the snippet below.

var hover_element = document.querySelector('.menu_item1');
var show_element = document.querySelector('.mega_menu_container');

hover_element.addEventListener('mouseenter', () => {
  show_element.style.opacity = '1';
});

hover_element.addEventListener('mouseleave', () => {
  show_element.style.opacity = '0';
});
.mega_menu_container {
  width: 100%;
  position: fixed;
  z-index: 99999999;
  opacity: 0.0;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

.menu_item1 {
  flex-direction: row;
}
<div class="menu_item1">Hover me</div>
<div class="mega_menu_container">Lorem ipsum</div>

Cervus camelopardalis0
Related