odin-css-exercises/animation/02-drop-down
2021-10-17 23:17:42 +01:00
..
solution Update with comments in solution.css 2021-10-17 23:17:42 +01:00
desired-outcome.gif Update README for dropdown 2021-10-17 23:08:33 +01:00
index.html Update with comments in solution.css 2021-10-17 23:17:42 +01:00
README.md Update README for dropdown 2021-10-17 23:08:33 +01:00
style.css Update with comments in solution.css 2021-10-17 23:17:42 +01:00

Dropdown

Here you'll make your very own dropdown menu using pure CSS.

Animate the appearance of a list so that it slides down when you hover your mouse over the button. This exercise will need multiple CSS selectors to get it working properly.

Desired Outcome

outcome

Self Check

  • Does the button's background color change when you hover on it?
  • Does the list smoothly slide down underneath the button when the button is hovered over?
  • Does the list smoothly slide back up to hiding when the mouse is moved away from the button or a list element?
  • Does the list appear and disappear when it is supposed to i.e. only when the mouse is over the button or a list element?