Accordian with visibility

Accordian using max-height with visibility to ensure that it is hidden for screen readers and tabbing. See https://stackoverflow.com/a/8331169/3732277 and comment https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css/8331169#comment131264615_8331169

by bytesnz

HTML

<div id="menu">
    <a tabindex="0">hover me</a>
    <ul id="list">
        <!-- Create a bunch, or not a bunch, of li's to see the timing. -->
        <li tabindex="0">item</li>
        <li tabindex="0">item</li>
        <li tabindex="0">item</li>
        <li tabindex="0">item</li>
        <li tabindex="0">item</li>
    </ul>
</div>

CSS

#menu #list {
    max-height: 0;
    transition: max-height 0.15s ease-out, visibility 0.15s;
    visibility: hidden;
    overflow: hidden;
    background: #d5d5d5;
}

#menu:hover #list,
#menu:focus-within #list {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
    visibility: visible;
}