show/hide content when hovering menu dont work

Question

Cant manage to work this. I want to hover menu element, and when i hover it shows gallery class.

I did put .gallery class display: none; and .main_menu ul li a:hover + .gallery

should change gallery display to block, but it just doesnt shows up ;)

HTML for the menu and gallery

<div class="main_menu">
<ul>
   <li><a href="#" class="shop">shop</a></li>
   <li><a href="#">collections </a></li>
   <li><a href="#">gifts</a></li>
   <li><a href="#">moodboard</a></li>
   <li><a href="#">blog</a></li>
</ul><br />
</div>

<!--gallery hover-->
<div class="gallery">
    <div class="item1">
    <img src="images/item_1.png" width="166" height="129" class="item_1" alt="*" />
    <div class="description">
    <span>Artwork</span>
    </div>
</div>
<div class="item2">
   <img src="images/item_2.png" width="166" height="129" class="item_1" alt="*" />
<div class="description">
    <span>Bedding</span>
</div>
 </div>

CSS

.gallery{
    position:absolute;
    top: 110px;
    left:0px;
    background-color: #f4f4f4;
    width: 980px;
    min-height: 300px;
    z-index: 3;
    padding: 20px 10px 20px 10px;
    display: none;
}

.main_menu ul li a:hover + .gallery {
    display: block;
}

Answer 1

+ .gallery is a sibling selector, so the .gallery element will need to be a sibling of the element with the :hover selector.

You will either need to change the location of .gallery or change which element will trigger the :hover.

Linked is a demo fiddle that shows a couple of options.

In the first, <div class="gallery"> has been moved to be a sibling of the first anchor tag with class .shop.

In the second example, the selector has been changed to: .main_menu2:hover + .gallery2 so that any hover over the entire menu will trigger the display of .gallery2.

Hopefully this will give you a better idea of how the sibling selector works with :hover and you can adjust it to something that works for your needs.