A:hover -> DIV doesn't display

Question

I have a problem with a page on my site (http://www.daklapackmedia.com/minigrip/productgroepen.html)

I have a .dropdown class which displays a DIV right under the header, you can see it in the source code underneath <-- START DROPDOWN MENU -->. When i set it to display:block it displays properly.

What i'm trying to accomplish is when you hover the "PRODUCTGROEPEN" menu item, the div displays.

<li><a class="menuItem" href="#">PRODUCTGROEPEN</a></li>

And some css:

body > header > div.container.dropdownmenu > div {
display: none;} 
.menuItem:hover + body > header > div.container.dropdownmenu > div {
display: block;

}

For some reason this is not working, i hope someone knows what i did wrong.

Thanks in advance!

Edit: Dropdown mark-up

<div style="position:relative;" class="container dropdownmenu">
        <div class="dropdown">
           <div class="container">
              <div class="row">
                 <div class="col-sm-3">
                    <h1 style="font-family:DINMedium;font-size:14pt;border-bottom: 5px solid #96785e;display:inline-block;margin-top:10px;">INDUSTRIEEL<br> </h1>
                    <ul class="dropdownul">
                       <li><a href="#">Antistatische gripzakken</a></li>
                       <li><a href="#">Biologisch afbreekbare verpakkingen</a></li>
                       <li><a href="#">Bouwprotec beschermhoes</a></li>
                       <li><a href="#">Colourbags</a></li>
                       <li><a href="#">Docubag paklijstenveloppen</a></li>
                       <li><a href="#">Euroblisters</a></li>
                       <li><a href="#">Griptapebags</a></li>
                       <li><a href="#">Haakzakken</a></li>
                       <li><a href="#">Headerbags</a></li>
                       <li><a href="#">Minigrip verpakking</a></li>
                       <li><a href="#">Photoprotec</a></li>
                       <li><a href="#">Polyzip</a></li>
                       <li><a href="#">Polyzip-O</a></li>
                       <li><a href="#">Slidergrip</a></li>
                       <li><a href="#">Transcase zelfklevende hoes</a></li>
                    </ul>
                 </div>
                 <div class="col-sm-3">
                    <h1 style="font-family:DINMedium;font-size:14pt;border-bottom: 5px solid #ffc845;display:inline-block;margin-top:10px;">ENVELOPPEN &<br> VERZENDVERPAKKINGEN</h1>
                    <ul class="dropdownul">
                       <li><a href="#">Etikette</a>n</li>
                       <li><a href="#">Hersluitbare enveloppe</a>n</li>
                       <li><a href="#">Paklijst enveloppen</a></li>
                       <li><a href="#">Papieren enveloppen</a></li>
                       <li><a href="#">Snazzybags</a></li>
                       <li><a href="#">Snazzybubbel</a></li>
                       <li><a href="#">Silkbags</a></li>
                       <li><a href="#">Transparante enveloppen</a></li>
                       <li><a href="#">Verzendverpakkingen</a></li>
                       <li><a href="#">Visitekaartjes & Briefpaper</a></li>
                    </ul>
                 </div>
                 <div class="col-sm-2">
                    <h1 style="font-family:DINMedium;font-size:14pt;border-bottom: 5px solid #4c9d2f;display:inline-block;margin-top:10px;">GELAMINEERD<br> </h1>
                    <ul class="dropdownul">
                       <li><a href="#">Machines & Tangen</a></li>
                       <li><a href="#">Stazakken</a></li>
                       <li><a href="#">Stazakken duo</a></li>
                       <li><a href="#">Stazakken met spout</a></li>
                       <li><a href="#">Stazakken met ventiel</a></li>
                       <li><a href="#">Stazakken zonder sluiting</a></li>
                       <li><a href="#">Vlakke zakken</a></li>
                       <li><a href="#">Wine Pouch</a></li>
                       <li><a href="#">Zijvouwzakken</a></li>
                    </ul>
                 </div>
                 <div class="col-sm-2">
                    <h1 style="font-family:DINMedium;font-size:14pt;border-bottom: 5px solid #f578c5;display:inline-block;margin-top:10px;">PROMOTIONEEL<br> </h1>
                    <ul class="dropdownul">
                       <li><a href="#">Draagtassen</a></li>
                       <li><a href="#">Fadebags</a></li>
                       <li><a href="#">Hemddraagtassen</a></li>
                       <li><a href="#">Hersluitbare draagtassen</a></li>
                       <li><a href="#">Geschenkdozen</a></li>
                       <li><a href="#">Geschenkverpakkingen</a></li>
                       <li><a href="#">Wijnverpakkingen</a></li>
                    </ul>
                 </div>
                 <div class="col-sm-2">
                    <h1 style="font-family:DINMedium;font-size:14pt;border-bottom: 5px solid #3db5e6;display:inline-block;margin-top:10px;">MEDISCH<br> </h1>
                    <ul class="dropdownul">
                       <li><a href="#">Absorberende materialen</a></li>
                       <li><a href="#">Buizen en containers</a></li>
                       <li><a href="#">Dental verpakkingen</a></li>
                       <li><a href="#">Ebola verpakking</a></li>
                       <li><a href="#">EPS Boxen</a></li>
                       <li><a href="#">Labaratorium verzendverpakking</a></li>
                       <li><a href="#">Labels / Etiketten</a></li>
                       <li><a href="#">Medicijn verpakkingen</a></li>
                       <li><a href="#">Polymed</a></li>
                       <li><a href="#">P620 en P650 Verpakkingen</a></li>
                       <li><a href="#">Safetybags</a></li>
                       <li><a href="#">Storage</a></li>
                       <li><a href="#">Swabs</a></li>
                       <li><a href="#">Transport</a></li>
                    </ul>
                 </div>
              </div>
              <img src="images/dropdown_bottom.jpg" style="left:210px;position:absolute;bottom:0px;">
           </div>
        </div>
     </div>

could you post a snippet here (i.e. a working demo) and not just the link to the live site please? Makes debugging a lot easier — jbutler483, Mar 13 '15 at 09:58
The `body` **cannot** be a sibling of a list item...your CSS selector make no sense. — Paulie_D, Mar 13 '15 at 09:58
Possible duplicate idea as http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — Paulie_D, Mar 13 '15 at 09:59
Yes i have, and it doesn't contain any errors (at least not in relation to this problem) — MantiNL, Mar 13 '15 at 10:14
Ive changed the CSS to .dropdown { display: none; } .menuItem:hover + .dropdown { display: block; } Still not working. — MantiNL, Mar 13 '15 at 10:17

Doml The-Bread · Accepted Answer · 2015-03-13T10:26:33.603

this is simply wrong .menuItem:hover + body > header > div.container.dropdownmenu > divsince you can't use body as a child selector of menuItem

you can solve this by using jquery with a different markup of your dom tree for instance:

<li><a class="menuItem" href="#">PRODUCTGROEPEN</a> <div class="dropdown">asdfasdfasdfasdfasdfasdf</div></li>
<li><a class="menuItem" href="#">PRODUCTGROEPEN</a><div class="dropdown">asdfasdfasdfasdfasdfasdf</div></li>
<li><a class="menuItem" href="#">PRODUCTGROEPEN</a><div class="dropdown">asdfasdfasdfasdfasdfasdf</div></li>

and the jquery for it:

$('.menuItem').on('mouseover', function(){
    $(this).siblings('.dropdown').addClass('active');
});

$('.menuItem').on('mouseout', function(){
    $(this).siblings('.dropdown').removeClass('active');
});

and the css:

.dropdown {
display: none;
}

.dropdown.active {
    display: block;
}

see this fiddle http://jsfiddle.net/kaduqtmt/

//EDIT

if you dont want to place your dropdown inside the <li> here is another example for seperated dropdown containers:

http://jsfiddle.net/kaduqtmt/1/

take a close look at the data-attribute and the classname of the div container

great :) glad to hear that – Doml The-Bread Mar 13 '15 at 10:40 — Doml The-Bread, Mar 13 '15 at 10:40

A:hover -> DIV doesn't display

1 Answers1