Used pure JS

Hey Matheus!

Great Job on this challenge. However, I noticed that for your dropdown to show, a user should start by clicking on the nav-link i.e. features to show the dropdown.

This works, but to improve the user's experience, you should show the drop-down menu when the user hovers over the nav-links with drop-down links like features.

To archive this functionality you should use mouse events like onmouseenter. The onmouseover mouse event is used to trigger a JavaScript function when the mouse pointer moves over an element. Here's an example of how you can use the onmouseover event:

1. HTML: Start by creating an HTML element that you want to interact with using the onmouseover event.

<button id="myButton">Hover over me!</button>

1. JavaScript: Next, write a JavaScript function that will be called when the onmouseover event is triggered.

1. Event binding: Finally, use the onmouseover to trigger any functionality that you wan't when the mouse hovers over the element

Also, instead of this:

function menu_open_a() {
menu_actived = true;
menu_dropdown.style.display = 'flex';
menu_dropdown.style.flexDirection = 'column';
menu_dropdown.style.listStyle = 'none';
menu_dropdown.style.padding = '0';
menu_dropdown.style.alignItems = 'flex-end';
menu_dropdown.style.borderRadius = '10px';
menu_dropdown.style.backgroundColor = 'white';
menu_dropdown.style.boxShadow = '2px 2px 35px 2px rgba(0, 0, 0, 0.2)';
arrow.src = 'images/icon-arrow-up.svg';
}

You can just create a sepatere CSS class that will have all those styles, and add it programaticaly on mouseover event like this:

.menu-dropdown-active {
display: flex;
flex-direction: column;
list-style: none;
padding: 0;
align-items: flex-end;
border-radius: 10px;
background-color: white;
box-shadow: 2px 2px 35px 2px rgba(0, 0, 0, 0.2);
}

JavaScript

// call this function on mouseover
function menu_open_a() {
menu_actived = true;
menu_dropdown.classList.add('menu-dropdown-active');
arrow.src = 'images/icon-arrow-up.svg';
}

Hope this helps👍.