Dropdown rollout after toggle animation

Hi there.

Please observe the dropdown in the header (hidden on front page). The dropdown appears before the animation of the toggle has completed - as illustrated in the attached video. I would like it to appear like a “rollout” from right to left. I did try with various css timing (transition delay, ec.), but no luck.

How can I achieve it? Thanks.