punkfairie/odin-css-exercises
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update with comments in solution.css

Browse source
This commit is contained in:
conor 2021-10-17 23:17:42 +01:00
parent 05b66966ce
commit 84d5b9d887
4 changed files with 21 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
animation/02-drop-down/index.html
View file

@ -10,8 +10,8 @@
<body>
<div class="dropdown-container">
<div class="dropdown-menu">
<button class="dropdown-button">Dropdown</button>
<ul class="dropdown-content">
<button>Dropdown</button>
<ul>
<li>Item 1</a>
<li>Item 2</a>
<li>Item 3</a>

22
animation/02-drop-down/solution/solution.css
View file

@ -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;
}

4
animation/02-drop-down/solution/solution.html
View file

@ -10,8 +10,8 @@
<body>
<div class="dropdown-container">
<div class="dropdown-menu">
<button class="dropdown-button">Dropdown</button>
<ul class="dropdown-content">
<button>Dropdown</button>
<ul>
<li>Item 1</a>
<li>Item 2</a>
<li>Item 3</a>

2
animation/02-drop-down/style.css
View file

@ -16,7 +16,7 @@
position: relative;
}
.dropdown-button {
button {
background-color: rgb(108, 238, 255);
padding: 16px;
font-size: 16px;