Как я могу добавить подменю и логотип со стрелкой в ​​​​это существующее меню с теми же стилями [закрыто] ⇐ CSS

[Anonymous]

Мне нужно добавить подменю с теми же стилями, что и главное меню. и элемент логотипа со стрелкой рядом с элементом меню, который показывает, что текущий элемент имеет подменю. Также мне нужно добавить то же самое в мобильную версию меню, чтобы он отображал пункт меню со стрелкой справа, и когда я нажимаю на него, он открывается и показывает подменю в мобильной версии
< р>your text

• Projects
  
  
  Kenji X1
• Geo-Lab
• Torch

[*]Documentation
[*]FAQ
[*]Blog
[*]Team
[*]Contact
[*]Shop
[*]Project 1
[*]Project 2
[*]Project 3
[*]Project 4

• Projects
  
  
  Kenji X1
• Geo-Lab
• Torch

[*]Documentation
[*]FAQ
[*]Blog
[*]Team
[*]Contact
[*]Shop











CSS
/* General styles */
body {
font-family: 'Familjen Grotesk', sans-serif;
background: #000;
color: #fff;
}

header a {
text-decoration: none;
color: #fff;
}

ul {
list-style: none;
padding: 0;
margin: 0;
}

/* Header Navbar */
.main-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 3;
display: flex;
justify-content: space-between;
align-items: center;
text-transform: uppercase;
height: 100px;
padding: 0 30px;
background-color: rgba(0, 0, 0, 0.4);
}

.main-header.hide {
transform: translateY(-100px);
}

/* Logo */
.logo {
width: 210px;
height: auto;
}

.logo img {
display: block;
width: 100%;
height: auto;
}

/* Desktop Menu */
.desktop-main-menu {
margin-right: 50px;
}

.desktop-main-menu ul {
display: flex;
}

.desktop-main-menu ul li {
position: relative;
margin-right: 10px;
padding-bottom: 2px;
}

/* Menu item bottom border */
.desktop-main-menu ul li a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: #fff;
transform: scale(0);
transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
transform-origin: right center;
}

.desktop-main-menu ul li a:hover::after {
transform: scaleX(1);
transform-origin: left center;
transition-duration: 0.7s;
}

/* Submenu styles */
.submenu {
display: none;
position: absolute;
top: calc(100% + 5px);
left: 0;
padding: 0;
background: transparent;
width: max-content;
}

.desktop-main-menu ul li:hover .submenu {
display: block;
}

.submenu li {
display: block;
width: 95px;
}

.submenu li a {
display: block;
padding: 10px;
color: #fff;
}

/* Submenu item bottom border */
.submenu li a::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 1px;
background: #fff;
transform: scaleX(0);
transition: transform 0.3s ease;
}

.submenu li a:hover::after {
transform: scaleX(1);
}

/* Styles for the submenu */
.has-submenu .submenu {
display: none;
position: absolute;
top: calc(100% - 5px);
left: -5px;
padding: 0;
background: transparent;
width: max-content;
}

.has-submenu:hover .submenu {
display: block;
}

.submenu li:first-child {
margin-top: 7px;
}

/* Arrow styles */
.has-submenu > i {
font-size: 10px;
pointer-events: none;
user-select: none;
position: absolute;
color: hsl(0, 0%, 100%);
top: 50%;
right: 5px;
transform: translateY(-50%);
}

/* Mobile Menu */
#mobile-menu .has-submenu > i {
margin-left: 10px;
}

#mobile-menu .submenu {
display: none;
padding-left: 15px;
}

#mobile-menu .has-submenu.open .submenu {
display: block;
}

/* Hamburger Menu */
.hamburger {
position: fixed;
top: 40px;
right: 20px;
z-index: 10;
cursor: pointer;
width: 20px;
height: 20px;
background: none;
border: none;
}

.hamburger-top,
.hamburger-middle,
.hamburger-bottom {
position: absolute;
width: 20px;
height: 2px;
top: 0;
left: 0;
background: #fff;
transition: all 0.5s;
}

/* Hamburger Menu top, middle, bottom lines positioning*/
.hamburger-middle {
transform: translateY(5px);
}

.hamburger-bottom {
transform: translateY(10px);
}

/* Transition hamburger Menu to X when open */
.open {
transform: rotate(90deg);
}

.open .hamburger-top {
transform: rotate(45deg) translateY(6px) translateX(6px);
}

.open .hamburger-middle {
display: none;
}

.open .hamburger-bottom {
transform: rotate(-45deg) translateY(6px) translateX(-6px);
}

/* Stop body scroll */
.stop-scrolling {
overflow: hidden;
}
/* Hide mobile main menu items */
.mobile-only {
display: none;
}
/* Mobile menu */
.mobile-main-menu {
position: fixed;
top: 0;
right: 0;
width: 350px;
height: 100%;
background: #000;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
transform: translateX(100%);
transition: transform 0.6s cubic-bezier(0.19,1,0.22,1);
}
/* Bring mobile menu from right */
.show-menu {
transform: translateX(0);
}

.mobile-main-menu ul {
display: flex;
flex-direction: column;
align-items: end;
justify-content: center;
padding: 50px;
width: 100%;
}

.mobile-main-menu ul li {
margin-bottom: 20px;
font-size: 18px;
text-transform: uppercase;
border-bottom: 1px #555 dotted;
width: 100%;
text-align: right;
padding-bottom: 8px;
}

.mobile-main-menu ul li a {
color: #fff;
transition: color 0.6s;
}

.mobile-main-menu ul li a:hover {
color: #aaa;
}

/* Mobile Menu Dropdown */
.mobile-main-menu .has-submenu > i {
position: absolute;
right: 30px; /* Adjust as needed */
}

.mobile-main-menu .submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: transparent;
width: 100%;
}

.mobile-main-menu .has-submenu.open .submenu {
display: block;
}

JS
document.addEventListener('DOMContentLoaded', function() {
const btn = document.getElementById('menu-btn');
const overlay = document.getElementById('overlay');
const menu = document.getElementById('mobile-menu');
const counters = document.querySelectorAll('.counter');
let scrollStarted = false;
btn.addEventListener('click', navToggle);
document.addEventListener('scroll', scrollPage);

function navToggle(){
btn.classList.toggle('open');
overlay.classList.toggle('overlay-show');
document.body.classList.toggle('stop-scrolling');
menu.classList.toggle('show-menu');
}

function scrollPage(){
const scrollPos = window.scrollY;
// console.log(scrollPos);
if(scrollPos > 100 && !scrollStarted){
countUp();
scrollStarted = true;
}else if (scrollPos < 100 && scrollStarted){
reset();
scrollStarted = false;
}
}

function countUp() {
counters.forEach((counter) => {
counter.innerText = '0';
const updateCounter = () => {
//Get count target
const target = +counter.getAttribute('data-target');
//Get current counter value
const c = +counter.innerText;

//create an increment
const increment = target / 100;
// If counter is less than target, add increment
if(c < target){
//Round up and set counter value
counter.innerText = `${Math.ceil(c + increment)}`;
setTimeout(updateCounter, 75);
} else {
counter.innerText = target;
}
};
updateCounter();
});
}

function reset(){
counters.forEach((counter) => (counter.innerHTML = '0'));
}

/* menu hide while scrolling */
let lastScroll = 0;
const defaultOffset = 200;
const mobileMenu = document.getElementById('mobile-menu');
const scrollPosition = () => window.pageYOffset || document.documentElement.scrollTop;
const containHide = () => mobileMenu.classList.contains('hide');
const header = document.querySelector('.main-header');

window.addEventListener('scroll', () => {
if (scrollPosition() > lastScroll && !containHide() && scrollPosition() > defaultOffset) {
// Scroll down
mobileMenu.classList.add('hide');
header.classList.add('hide'); // Optionally hide the main header as well
console.log('down');
} else if (scrollPosition() < lastScroll && containHide()) {
// Scroll up`your text`
console.log('up');
mobileMenu.classList.remove('hide');
header.classList.remove('hide'); // Optionally show the main header when scrolling up
}
lastScroll = scrollPosition();
});

});


Подробнее здесь: https://stackoverflow.com/questions/786 ... ame-styles