Dropdown Content - html

Question

im trying to replicate the "Page" Dropdown Animation with the icon, but im having difficulties, someone know how to make it similar to the "Page scroll one"?
Im leaving the code, you can find the Button than im trying to replicate with the icon dropdown and where i am at the moment.
Here is the HTML CODE:
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Play:wght#400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#300;400;500;600;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<header class="header">
<div class="container">
<div class="row">
<div class="col-lg-2">
<div class="header__logo">
<img src="img/logo.png" alt="">
</div>
</div>
<div class="col-lg-10">
<div class="header__nav__option">
<nav class="header__nav__menu mobile-menu">
<ul>
<li>Pages
<ul class="dropdown">
<li>About</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Blog Details</li>
</ul>
</li>
</ul>
</nav>
<div class="header__nav__settings">
<ul>
<a href="#"><i class="fa fa-gear"></i>
<ul class="dropdown">
<li>Portfolio</li>
<li>Blog</li>
<li>Blog Details</li>
</ul>
</a>
</ul>
</div>
</div>
</div>
</div>
<div id="mobile-menu-wrap"></div>
</div>
</header>
Here is the css
.header {
position: absolute;
left: 0;
top: 0;
width: 100%;
background: transparent;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
z-index: 9;
}
.header__nav__menu {
display: inline-block;
margin-right: 45px;
}
.header__nav__menu ul li {
list-style: none;
display: inline-block;
margin-right: 45px;
position: relative;
}
.header__nav__menu ul li.active a:after {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.header__nav__menu ul li:hover a:after {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.header__nav__menu ul li:hover .dropdown {
top: 34px;
opacity: 1;
visibility: visible;
}
.header__nav__menu ul li:last-child {
margin-right: 0;
}
.header__nav__menu ul li .dropdown {
position: absolute;
left: 0;
top: 60px;
width: 140px;
background: black;
text-align: left;
padding: 2px 0;
z-index: 9;
opacity: 0;
visibility: hidden;
-webkit-transition: all, 0.3s;
-o-transition: all, 0.3s;
transition: all, 0.3s;
}
.header__nav__menu ul li .dropdown li {
display: block;
margin-right: 0;
}
.header__nav__menu ul li .dropdown li a {
font-size: 14px;
color: white;
padding: 8px 20px;
text-transform: capitalize;
}
.header__nav__menu ul li .dropdown li a:after {
display: none;
}
.header__nav__menu ul li a {
font-size: 15px;
font-family: "Play", sans-serif;
color: black;
display: block;
text-transform: uppercase;
position: relative;
padding: 6px 0;
}
.header__nav__menu ul li a:after {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #00bfe7;
content: "";
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all, 0.3s;
-o-transition: all, 0.3s;
transition: all, 0.3s;
}
/*Settings Dropdown*/
.header__nav__settings {
display: inline-block;
position: relative;
padding-left: 50px;
}
.header__nav__settings:before {
position: absolute;
left: 0;
top: 4px;
height: 13px;
width: 2px;
background: rgba(225, 225, 225, 0.2);
content: "";
}
.header__nav__settings a {
color: black;
font-size: 15px;
}
.header__nav__settings a:last-child {
margin-right: 0;
}
.slicknav_menu {
display: none;
}
/*Settings Dropdown Content*/
.header__nav__settings ul a {
list-style: none;
display: inline-block;
margin-right: 45px;
position: relative;
}
.header__nav__settings ul a i.active a:after {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.header__nav__settings ul a i:hover a:after {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.header__nav__settings ul:hover .dropdown {
top: 34px;
opacity: 1;
visibility: visible;
}
.header__nav__settings ul .dropdown li a {
font-size: 14px;
color: white;
padding: 8px 20px;
text-transform: capitalize;
}
.header__nav__settings ul .dropdown {
position: absolute;
left: 0;
top: 60px;
width: 140px;
background: black;
text-align: left;
padding: 2px 0;
z-index: 9;
opacity: 0;
visibility: hidden;
-webkit-transition: all, 0.3s;
-o-transition: all, 0.3s;
transition: all, 0.3s;
}
.header__nav__settings ul .dropdown li {
display: block;
margin-right: 0;
}
.header__nav__settings ul li .dropdown li a {
font-size: 14px;
color: white;
padding: 8px 20px;
text-transform: capitalize;
}
.header__nav__settings ul a .dropdown li a:after {
display: none;
}
.header__nav__settings ul li a {
font-size: 15px;
font-family: "Play", sans-serif;
color: black;
display: block;
text-transform: uppercase;
position: relative;
padding: 6px 0;
}
.header__nav__settings ul li a:after {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #00bfe7;
content: "";
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all, 0.3s;
-o-transition: all, 0.3s;
transition: all, 0.3s;
}
Thank u in adavnce for the help!!!

Answer 1

Your code is wrong because your wrote <i> instead of <li> and you didn't close the <a> where you should. This is the code corrected:
.header {
position: absolute;
left: 0;
top: 0;
width: 100%;
background: transparent;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
z-index: 9;
}
.header__nav__menu {
display: inline-block;
margin-right: 45px;
}
.header__nav__menu ul li {
list-style: none;
display: inline-block;
margin-right: 45px;
position: relative;
}
.header__nav__menu ul li.active a:after {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.header__nav__menu ul li:hover a:after {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.header__nav__menu ul li:hover .dropdown {
top: 34px;
opacity: 1;
visibility: visible;
}
.header__nav__menu ul li:last-child {
margin-right: 0;
}
.header__nav__menu ul li .dropdown {
position: absolute;
left: 0;
top: 60px;
width: 140px;
background: black;
text-align: left;
padding: 2px 0;
z-index: 9;
opacity: 0;
visibility: hidden;
-webkit-transition: all, 0.3s;
-o-transition: all, 0.3s;
transition: all, 0.3s;
}
.header__nav__menu ul li .dropdown li {
display: block;
margin-right: 0;
}
.header__nav__menu ul li .dropdown li a {
font-size: 14px;
color: white;
padding: 8px 20px;
text-transform: capitalize;
}
.header__nav__menu ul li .dropdown li a:after {
display: none;
}
.header__nav__menu ul li a {
font-size: 15px;
font-family: "Play", sans-serif;
color: black;
display: block;
text-transform: uppercase;
position: relative;
padding: 6px 0;
}
.header__nav__menu ul li a:after {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #00bfe7;
content: "";
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all, 0.3s;
-o-transition: all, 0.3s;
transition: all, 0.3s;
}
/*Settings Dropdown*/
.header__nav__settings {
display: inline-block;
position: relative;
padding-left: 50px;
}
.header__nav__settings:before {
position: absolute;
left: 0;
top: 4px;
height: 13px;
width: 2px;
background: rgba(225, 225, 225, 0.2);
content: "";
}
.header__nav__settings a {
color: black;
font-size: 15px;
}
.header__nav__settings a:last-child {
margin-right: 0;
}
.slicknav_menu {
display: none;
}
/*Settings Dropdown Content*/
.header__nav__settings ul a {
list-style: none;
display: inline-block;
margin-right: 45px;
position: relative;
}
.header__nav__settings ul a i.active a:after {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.header__nav__settings ul a i:hover a:after {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.header__nav__settings ul:hover .dropdown {
top: 34px;
opacity: 1;
visibility: visible;
}
.header__nav__settings ul .dropdown li a {
font-size: 14px;
color: white;
padding: 8px 20px;
text-transform: capitalize;
}
.header__nav__settings ul .dropdown {
position: absolute;
left: 0;
top: 60px;
width: 140px;
background: black;
text-align: left;
padding: 2px 0;
z-index: 9;
opacity: 0;
visibility: hidden;
-webkit-transition: all, 0.3s;
-o-transition: all, 0.3s;
transition: all, 0.3s;
}
.header__nav__settings ul .dropdown li {
display: block;
margin-right: 0;
}
.header__nav__settings ul li .dropdown li a {
font-size: 14px;
color: white;
padding: 8px 20px;
text-transform: capitalize;
}
.header__nav__settings ul a .dropdown li a:after {
display: none;
}
.header__nav__settings ul li a {
font-size: 15px;
font-family: "Play", sans-serif;
color: black;
display: block;
text-transform: uppercase;
position: relative;
padding: 6px 0;
}
.header__nav__settings ul li a:after {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #00bfe7;
content: "";
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all, 0.3s;
-o-transition: all, 0.3s;
transition: all, 0.3s;
}
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Play:wght#400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<header class="header">
<div class="container">
<div class="row">
<div class="col-lg-2">
<div class="header__logo">
<img src="img/logo.png" alt="">
</div>
</div>
<div class="col-lg-10">
<div class="header__nav__option">
<nav class="header__nav__menu mobile-menu">
<ul>
<li>Pages
<ul class="dropdown">
<li>About</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Blog Details</li>
</ul>
</li>
</ul>
</nav>
<div class="header__nav__settings">
<ul>
<li class="fa fa-gear">
<ul class="dropdown">
<li>Portfolio</li>
<li>Blog</li>
<li>Blog Details</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="mobile-menu-wrap"></div>
</div>
</header>