← All elements
<nav class="m"><div class="d"><button>Menu ▾</button><ul><li><a href="#">Profile</a></li><li><a href="#">Settings</a></li><li><a href="#">Sign out</a></li></ul></div></nav>About this menu
A dropdown that opens on hover or keyboard focus, using :hover, :focus-within and a small fade and slide.
How it works
The list is positioned absolutely under the button inside a relative wrapper. It starts with opacity 0, visibility hidden and a small upward offset. The rules .d:hover ul and .d:focus-within ul reset those values, so the menu fades and slides into place on hover or keyboard focus, with no script.
Ways to customise it
- Change min-width on the list to resize the menu.
- Edit the hover background on the links.
- Switch left: 0 to right: 0 to align the menu to the other edge.
Good to know
Because it also opens on :focus-within, tabbing into the button reveals the links. Hover-only menus do not work on touch devices, so make sure the top-level item is also a real link or has a fallback.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.