CSS-Selektorfehler - Untermenü wird nicht angezeigt Hover

Ich habe schon damit gekämpft, dass mein Untermenü beim Hover angezeigt wird, aber sobald ich das Elternelement ".dropdown-toggle" loslasse, verschwindet das Untermenü.CSS-Selektorfehler - Untermenü wird nicht angezeigt Hover

Seit Stunden versucht, dies zu beheben, schauen Sie auf den Code unten und sehen Sie, ob Sie das Problem bitte lösen können.

Sehr geschätzt

.dropdown-menu { 
    position: absolute; 
    top: 40px; 
    border: none; 
    padding: 0; 
    border-radius: 0; 
    width: 200px; 
    background: #e8e8e8; 
    visibility:hidden; 
    opacity:0; 
    filter:alpha(opacity=0); 
    -webkit-transition:700ms ease; 
    -moz-transition:700ms ease; 
    -o-transition:700ms ease; 
    transition:700ms ease; 
    } 

    .dropdown-toggle:hover + .dropdown-menu, .dropdown-menu { 
    display: block; 
    visibility:visible; 
    opacity:1; 
    filter:alpha(opacity=100); 
    }

Quelle

2017-10-27 Martin Hall

Ihr .dropdown-Menü muss ein untergeordnetes Element von .dropdown-Toggle sein für: schweben arbeiten, auch wenn Sie aus .dropdown-Toggle bewegen sich-Menü .dropdown zu. In deinem Fall sind diese 2 nach deiner CSS Geschwister, die nicht funktionieren werden. – guramidev

Eine Problemumgehung wäre das Hinzufügen von ', .dropdown-menu: hover' zum zweiten Selektor. –

Danke für Ihre Antwort, das hat nicht funktioniert –

Vielen Dank für Ihre alle Ihre Antworten. Dies war die Arbeitslösung unten.

.dropdown-menu { 
    position: absolute; 
    top: 40px; 
    border: none; 
    padding: 0; 
    border-radius: 0; 
    width: 200px; 
    background: #e8e8e8; 
    visibility:hidden; 
    opacity:0; 
    filter:alpha(opacity=0); 
    -webkit-transition:700ms ease; 
    -moz-transition:700ms ease; 
    -o-transition:700ms ease; 
    transition:700ms ease; 
    } 


    .dropdown:hover .dropdown-menu, .dropdown-menu { 
    display: block; 
    visibility:visible; 
    opacity:1; 
    filter:alpha(opacity=100); 
    }

Quelle

2017-10-30 09:22:30

Nur wenige Änderungen können lösen dieses. Dropdown-Toggle geändert-Dropdown-Menü (Parent geändert)

.dropdown-menu { 
    position: absolute; 
    top: 33px; /* reduced the gap so that it wont dissapear while hovering on submenu*/ 
    border: none; 
    padding: 0; 
    border-radius: 0; 
    width: 200px; 
    background: #e8e8e8; 
    visibility:hidden; 
    opacity:0; 
    filter:alpha(opacity=0); 
    -webkit-transition:700ms ease; 
    -moz-transition:700ms ease; 
    -o-transition:700ms ease; 
    transition:700ms ease; 
    } 

    .dropdown:hover .dropdown-menu { 
    display: block; 
    visibility:visible; 
    opacity:1; 
    filter:alpha(opacity=100); 
    }

Quelle

2017-10-27 11:39:19

Vielen Dank für Ihre Antwort! Das hat fast funktioniert, aber es hat mich in die richtige Richtung gelenkt, am Ende war die Lösung. –

Willkommen @MartinHall. –

Sie können versuchen, diese CSS:

.dropdown-menu { 
    position: absolute; 
    border: none; 
    padding: 0; 
    border-radius: 0; 
    width: 200px; 
    background: #e8e8e8; 
    visibility: hidden; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    -webkit-transition: 700ms ease; 
    -moz-transition: 700ms ease; 
    -o-transition: 700ms ease; 
    transition: 700ms ease; 
    margin-top: -5px; 
    padding-top: 5px; 
} 

.dropdown-toggle { 
    position: relative; 
    display: inline-block; 
} 

.dropdown-toggle:hover .dropdown-menu { 
    display: block; 
    visibility: visible; 
    opacity: 1; 
    filter: alpha(opacity=100); 
}

HTML:

<div class="dropdown-toggle"> 
    <a>Hover me</a> 
    <ul class="dropdown-menu"> 
    <li>A</li> 
    <li>B</li> 
    <li>C</li> 
    </ul> 
</div>

Demo: http://jsfiddle.net/lotusgodkk/GCu2D/2204/

Quelle

2017-10-27 11:40:27

CSS-Selektorfehler - Untermenü wird nicht angezeigt Hover

Antwort

Verwandte Themen