From 84d5b9d88743c6f172ebc7ecdda9c55cb4c1156d Mon Sep 17 00:00:00 2001 From: conor Date: Sun, 17 Oct 2021 23:17:42 +0100 Subject: [PATCH] Update with comments in solution.css --- animation/02-drop-down/index.html | 4 ++-- animation/02-drop-down/solution/solution.css | 22 ++++++++++++++----- animation/02-drop-down/solution/solution.html | 4 ++-- animation/02-drop-down/style.css | 2 +- 4 files changed, 21 insertions(+), 11 deletions(-) diff --git a/animation/02-drop-down/index.html b/animation/02-drop-down/index.html index ac776df..e50c3cc 100644 --- a/animation/02-drop-down/index.html +++ b/animation/02-drop-down/index.html @@ -10,8 +10,8 @@
- -
    + +
    • Item 1
    • Item 2
    • Item 3 diff --git a/animation/02-drop-down/solution/solution.css b/animation/02-drop-down/solution/solution.css index 447d4d2..70a5be5 100644 --- a/animation/02-drop-down/solution/solution.css +++ b/animation/02-drop-down/solution/solution.css @@ -16,7 +16,7 @@ position: relative; } -.dropdown-button { +button { background-color: rgb(108, 238, 255); padding: 16px; font-size: 16px; @@ -30,26 +30,36 @@ ul { width: 160px; list-style: none; text-align: center; - overflow: hidden; - max-height: 0; - transition: max-height 0.25s ease-out; } li { padding: 16px; } +/* SOLUTION */ + +/* disclaimer: duplicating the `ul` element here isn't best practice. +In your solution you probably put it right inside the existing `ul`, +which _is_ the best practice. +We separated it out here to make it extra clear what has changed. */ + +ul { + overflow: hidden; + max-height: 0; + transition: max-height 0.25s ease-out; +} + .dropdown-menu:hover ul { max-height: 500px; transition: max-height 0.5s ease-out; } -.dropdown-menu:hover .dropdown-button { +button:hover { cursor: pointer; background-color: rgb(59, 232, 255); } -.dropdown-content li:hover { +ul li:hover { cursor: pointer; background-color: #ddd; } diff --git a/animation/02-drop-down/solution/solution.html b/animation/02-drop-down/solution/solution.html index 3ef4ae0..84088a1 100644 --- a/animation/02-drop-down/solution/solution.html +++ b/animation/02-drop-down/solution/solution.html @@ -10,8 +10,8 @@
      - -
        + +
        • Item 1
        • Item 2
        • Item 3 diff --git a/animation/02-drop-down/style.css b/animation/02-drop-down/style.css index 5737e96..4bcb1e8 100644 --- a/animation/02-drop-down/style.css +++ b/animation/02-drop-down/style.css @@ -16,7 +16,7 @@ position: relative; } -.dropdown-button { +button { background-color: rgb(108, 238, 255); padding: 16px; font-size: 16px;