Building CSS dropdown menus is a classic struggle.

Hover states get stuck. Keyboard navigation breaks. Accessibility is forgotten. And if you don't position it right, the menu pushes all your page content down when it opens.

Let's fix the layout and the accessibility.

The Layout Problem

If your dropdown menu is in the normal document flow, making it visible ( display: block ) will expand the container's height. This pushes everything below it down.

To fix this, you need to take the dropdown out of the document flow using position: absolute .

/* The parent container must be relative */ .dropdown { position : relative ; display : inline-block ; }

/* The menu is absolute and hidden by default */ .dropdown-content { display : none ; position : absolute ; top : 100% ; /* Positions it right below the parent */ left : 0 ; z-index : 100 ; /* Ensures it sits on top of other elements */ background-color : white ; box-shadow : 0 4px 6px rgba ( 0 , 0 , 0 , 0.1 ); }

Enter fullscreen mode

Exit fullscreen…