Not bad, not bad.
We're almost there, and as far as hiding the submenu, I would want to hide it in two cases when we
hover over the hero.
So not when we're hovering over the submenu, then, of course, we were on display.
And also when we're hovering over the number, not including the buttons, we need to keep in mind that
if you check all the elements, of course, we know that buttons our buttons are in the nav.
So I would want to check if I'm hovering over a number, but not over the buttons.
So if the buttons, then, of course, I would still want to display the submenu.
But then if it is a number so somewhere over here, then of course I would want to hide it and we can
test start out over here.
This is my submenu.
If I have already here, of course I cannot see.
And now if I move on to the number, then I also hide the submenu and we're going to start over here
by navigating probably to a hero, because that is going to be the fastest one where we have the hero.
We do have the clothes submenu.
And I remember the event that we were listening for on the buttons, what it was, it was on mouseover.
So the moment our mouse pointer moves on to the hero, what I would want to call no simple clothes,
close submenu.
So what we should see right now is, of course, I can put it nicely.
Yep, there it is.
But then the moment I move onto the hero, of course, I hide it now with a knife bar.
It is going to be a bit trickier because essentially we'll have to implement that event target as well.
So I'm going to navigate to my no, of course, I already have the function.
I have closed submenu and then I have the knife.
So again, I'll call my own mouse over, but I'll come up with my function.
I say handle submenu work.
So and in here I'll declare the function.
I say handle sub menu and I'm looking for the event object.
That is definitely something that I would want.
And I can check whether the class list is dealing button.
Now, why am I checking that?
Because if I'm hovering over the button, remember buttons had that class of my button or linked button.
Correct.
One of two.
It was linked.
But there is so what I'm saying here is if the event target has the class of button, then I wouldn't
want to call the closed submenu.
But if it is anything else, if it is not center or nav or whatever, then of course I would want to
close the sub menu because we need to understand, if we just say close submenu, what is going to happen,
what will never open it, because now, of course, we're hovering over the number because the buttons
are no.
And there is now I cannot open and since I'm right about closing it as well.
So essentially we avoid that if we set up condition.
And I'm going to say, if I want Target, then class list.
Class list again, we're going back to Vanilla JavaScript contains.
And then the class that I'm looking for is a link between.
If that is the case, then I would want to close it.
So essentially, if the target that I'm hovering over does not have the link button, then I would want
to close it.
If it does contain button, which of course linked buttons, you can clearly see that, that I wouldn't
want to close my submenu.
So now, of course, as I'm hovering, everything is beautiful.
And then once I move on to the actual number that I hated and that was exactly the reason why I lifted
up the submenu three pixels, because now it is actually sitting on a button.
So that was done on purpose.
And that way once I move from button, I submenu everything still works.
That's our project.
Hopefully everyone enjoyed our project and I hope to see the next one.