Menü mit Transition

Hallo werte Helfer,

ich habe ein vertikales Menü mit folgendem css erstellt (...und es funktioniert auch):

#secondary,
#secondary ul,
#secondary li,
#secondary a,
#secondary span {
 margin: 0;
 padding: 0;
 border: 0;
 outline: none;
}
#secondary li {
 list-style: none;


}
/* Accordian Style */
#secondary li > a {
    display: block;
    position: relative;
    float: right;
    width: 24rem;
    height: 3rem;
    text-align: left;
    color: rgba(98,126,172,1)/*blau*/;
    font-family: 'Noto Sans', sans-serif;
    font-size: 90%;
    font-weight: bold;
    line-height: 220%;
    text-indent: 2.2rem;
    text-decoration: none;
    background-image: url(images/nav-vertikal-2.png);
    background-position: 0px -30px;
    background-repeat: no-repeat;
}
#secondary li > a:hover {
    background-position: 0px 0px;
    color: white;
}
/* Accordian Function */
#secondary ul ul {
    display: none;
}
#secondary li:hover > ul {
    display: block;
}
#secondary li > ul ul {
height: 0px;
 overflow: hidden;
-webkit-transition: height 0.3s ease-out;
    -moz-transition: height 0.3s ease-out;
    -o-transition: height 0.3s ease-out;
    -ms-transition: height 0.3s ease-out;
    transition: height 0.3s ease-out;
}
#secondary li:target > ul ul {
height: 98px;
}
#secondary .current_page_item a,
#secondary .current-menu-item a {
    background-position: 0px 0px;
    color: white;
}

Allerdings kriege ich diese blöde ease-in-out transition nicht zum Laufen.
Alle möglichen Varianten habe ich schon probiert - leider ohne Erfolg.

Was mach ich da falsch?

Danke

Hallo, vielen Dank für die Antwort und sorry, ja, ich hätte dazu schreiben sollen, dass es einfach kontrolliert auf und zu sliden soll.
Link kann ich leider keinen posten, da ich das noch auf dem localhost am Laufen habe.

Falls du noch Zeit und Lust hast, dann könntest du mir bitte die Logik dieser Zeilen erklären:

#secondary li > ul ul {
height: 0px;
overflow: hidden;
-webkit-transition: height 0.3s ease-out;
-moz-transition: height 0.3s ease-out;
-o-transition: height 0.3s ease-out;
-ms-transition: height 0.3s ease-out;
transition: height 0.3s ease-out;
}
#secondary li:target > ul ul {
height: 98px;
}

Das mit der "height" erschließt sich mir nicht wirklich.
Ich habe das Ganze aus einem Tutorial und es funktioniert,
aber wenn ich es nicht wirklich verstehe,
dann ist das weniger als die halbe Miete.

Danke
Blaumann

Danke, in dem Zusammenhang versteh ich das.
Wo es hakt, ist die doppelte Anweisung:
Einmal height 0px

und dann wieder 98px;

Vor allem kann ich die Werte beliebig ändern, ohne dass es einen sichtbaren Effekt hat.

Heißt dass, dass die Anweisung "transition: height 0.3s ease-out;" zu
#secondary li:hover > ul {
display: block;
}
gehören würde?

Hab ich probiert - ändert aber nichts...?!!:-(