html - :hover -> DIV doesn't display

Question

我网站上的一个页面有问题 ( http://www.daklapackmedia.com/minigrip/productgroepen.html )

我有一个 .dropdown 类，它在标题下方显示一个 DIV，您可以在 <-- START DROPDOWN MENU --> 下面的源代码中看到它。 当我将其设置为 display:block 时，它会正常显示。

我想要完成的是，当您将鼠标悬停在“PRODUCTGROEPEN”菜单项上时，会显示 div。

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

还有一些CSS:

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

出于某种原因，这不起作用，我希望有人知道我做错了什么。

提前致谢!

编辑:下拉标记

<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>

Answer 1

这是完全错误的.menuItem:hover + body > header > div.container.dropdownmenu > div因为您不能将 body 用作 menuItem 的子选择器

你可以通过使用 jquery 和你的 dom 树的不同标记来解决这个问题，例如:

<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>

和它的jquery:

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

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

和CSS:

.dropdown {
display: none;
}

.dropdown.active {
    display: block;
}

看到这个 fiddle http://jsfiddle.net/kaduqtmt/

//编辑

如果您不想将下拉列表放在 <li> 中这是单独的下拉容器的另一个示例:

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

仔细看看data-attribute和 div 容器的类名