Zuerst ist hier dasGeig

Nur ein reguläres Bootstrap-Dropdown, ich habe ein paar Änderungen an CSS vorgenommen, so dass das Dropdown beim Hover (anstatt beim Klicken) angezeigt wird, aber wie möchte ich eine sehr einfache Fade-Animation. Ich habe versucht, CSS-Übergang, aber es hat nicht funktioniert, weil das Dropdown-Menü-Element eine "Anzeige: keine" angewendet hat, beim Schweben ändert es sich in "Anzeige: Block". Wie animiere ich ein Element, das von "display: none" zu "display: block" wechselt, oder gibt es eine andere Methode, um dies zu erreichen?

Ich habe das schon gegoogelt und eine Antwort gefunden, aber sie haben nicht geholfen.

HTML Quelltext

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

CSS-Code:

.dropdown .dropdown-menu{
opacity: 0;
transition:         all 400ms ease;
-moz-transition:    all 400ms ease;
-webkit-transition: all 400ms ease;
-o-transition:      all 400ms ease;
-ms-transition:     all 400ms ease;
}
.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
}