Question

我的网站上的网页存在问题（http://www.daklapackmedia.com/minigrip/productgroepen.html）

我有一个.dropdown类，它在标题下面显示一个DIV，你可以在＆lt; - START DROPDOWN MENU - ＆gt;下面的源代码中看到它。当我将其设置为显示时：阻止它正确显示。

我想要实现的目标是当你徘徊在＆＃34; PRODUCTGROEPEN＆＃34;菜单项，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;
}

看到这个小提琴 http://jsfiddle.net/kaduqtmt/

<强> //修改

如果你不想把你的下拉列表放在<li>里面，这是分隔下拉容器的另一个例子：

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

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

答：悬停 - ＆gt; DIV没有显示

1 个答案: