Dropdown Inhalt nicht zu zeigen schweben

Question

Das ist mein HTML

<header class='lap-12 row'> 
    <div class="lap-2 center"> 
     <a href="#"><img src="logo-desktop.png" alt="logo-desktop"></a> 
    </div> 
    <div class="lap-8 center space-around"> 
     <a id='velos' href="#"><b>VELOS</b></a> 
     <a href="#"><b>PRODUITS</b></a> 
     <a href="#">LA MARQUE</a> 
     <a href="#">CONSEILS</a> 
     <a href="#">GARANTIE À VIE</a> 
     <i class="fa fa-search" aria-hidden="true"></i> 
    </div> 
    <div class="lap-2"> 
    </div> 
</header> 
<div class="lap-12 dropdown-content"> 
    <div class="lap-12 dropdown-top"> 
     1 
    </div> 
    <div class="lap-12 dropdown-bottom"> 
     2 
    </div> 
</div> 

und das ist mein CSS:

.dropdown-content { 
    display: none; 
    position: absolute; 
    height: 150px; 
    width: 100%; 
} 

#velos:hover .dropdown-content { 
    display: block; 
} 

Die Drop-Down-Inhalt wird einfach nicht auf dem Hover meiner 'velos' id zeigt. Die Klassen * geben meinen Elementen nur eine Breite.

Answer 1

CSS:

#velos:hover .dropdown-content {} 

Mittel:

Wenn das Element mit id velos schwebte ist, den Stil der Kinder ändern Klasse dropdown-content

In Ihrem Beispiel mit, Element mit Klasse dropdown-content nicht haben #velos als Eltern, so wird es nicht betroffen sein.

so etwas wie dieses Versuchen:

<header class='lap-12 row'> 
    <div class="lap-2 center"> 
     <a href="#"><img src="logo-desktop.png" alt="logo-desktop"></a> 
    </div> 
    <div class="lap-8 center space-around"> 
     <a id='velos' href="#"><b>VELOS</b> 
      <div class="lap-12 dropdown-content"> 
       <div class="lap-12 dropdown-top"> 
        1 
       </div> 
       <div class="lap-12 dropdown-bottom"> 
        2 
       </div> 
      </div>   
     </a> 
     <a href="#"><b>PRODUITS</b></a> 
     <a href="#">LA MARQUE</a> 
     <a href="#">CONSEILS</a> 
     <a href="#">GARANTIE À VIE</a> 
     <i class="fa fa-search" aria-hidden="true"></i> 
    </div> 
    <div class="lap-2"> 
    </div> 
</header> 

JSFiddle

ich auch zusätzliche Stile hinzugefügt Dropdown, so wäre es mit einem Link 1 gemeinsames Pixel sein, und es würde als Menü nutzbar sein:

... sonst würde es nach dem Schweben verschwinden, da die Verbindung sich selbst schweben würde. Zumindest in Chrome/Opera.

Answer 2

Ihr CSS fragt nach der Anzeige: Block; bei .dropdown-content auf hover als kinder von velos.

Offensichtlich ist es falsch und trotzdem ist es nicht der richtige Weg, es zu tun, versuchen Sie dies:

$("ul li").slideUp(); 
 
    $("label").mouseover(function() { 
 
     $("ul li").slideToggle(); 
 
    });

ul { 
 
     display: table; 
 
     list-style: none; 
 
     padding: 0; 
 
    } 
 

 
    ul li { 
 
     display: block; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <label>One</label> 
 
    <ul> 
 
     <li>One</li> 
 
     <li>Two</li> 
 
     <li>Three</li> 
 
     <li>Four</li> 
 
     <li>Five</li> 
 
    </ul>