All right, and I think we're going to start somewhat slowly by just displaying of that submenu when
we're hovering over the buttons and then we'll deal with the difficult part where, of course, we would
need to place it exactly where the button is.
And we also would want to display only the sublimates that belong to that page.
So let's just start very simply where we have the submenu.
I would want to import the EU's global context because we are going to be some things that will grab
from there.
So in submenu, copy and paste, we have used global context online for the time being.
We're just going to go with one value.
Is submenu open, which of course, we already know that it is true since we set it up by default.
So is submenu.
When you open is my value and it is coming from U.S. global context.
And that as far as this return, which is going to go with aside and.
All right.
We set up our ternary operator, so class name and then of course we have templating and then I will
say, is submenu open?
If that is the case, then we would want to display to your classes.
If not, then we'll just display one.
So we have submenu class and then show class as well.
And of course, if it is false, which of course we know is not by default at the moment, which is
go with submenu class and then inside we can just write something because eventually, yes, we will
iterate over the data coming from our data.
Yes.
But for the time being, we just need to deal with this submenu.
That's the one that we're interested.
And of course, what we notice is that it is displayed beautiful.
And if we don't change that value in the global context, then of course we can do it and we can just
say false.
And of course, now it is going to be him.
Now, there's a few things that we would need to fix.
First of all, I only want to show submenu when I'm hovering over the buttons.
So essentially when the mouse enters the buttons in the number, only then I would want to display the
submenu, because at the moment, of course, it is shown by default.
I mean, at least the words so I'm checking is submenu open and remember where we have the number,
right.
And that we had open submenu and the node set it up.
We would need to add on mouseover eventless there and we would want to invoke a function.
Not technically.
You can make an argument that we could write away or on open submenu, but because there's going to
be more functionality in there, I would want to set up a reference.
So first of all, I'm going to create a function consed and I'll call this display sub menu and I'll
definitely need my event target for sure.
And then let's just go along.
Hello World.
And then I would want to go with open submenu.
So yeah, there's going to be eventually more functionality, but for now we'll just say open submenu
and these three buttons that I have for all of them, I'm not going to say unclick more say on mouseover.
So that just means that once the mouse moves over the button and of course we display the submenu.
So let's just say display submenu and I'm going to grab this volume.
And we're going to copy and paste for all button, so one and two, and now what you'll notice is that
once you hover over the button, then, of course, we can display.
Now, the problem is, of course, the fact that we cannot close it.
Correct.
So essentially, the moment I hover over my first button that it is displayed and there's no way for
me to hide it, which is OK, because we're going to fix that in a second.