OK…I’ve made a couple of changes which simplify matters.
Firstly, I swapped out the sub-menu for a div…much easier to handle and probably (arguably) more semantic.
Secondly, I moved the close button to inside the container rather than have multiple versions in each div. Frankly, this was, I think, because there was some event bubbling (I think I have that right) which prevented stuff from happening higher up when it was clicked.
My JS skill are mediocre at best.
Regardless, it makes the HTML simpler too.
Also, in this case, I was able to simplify the CSS by using the
currentColor attribute/property, which allows me to re-use the current text color and apply it to the border.
Which brings me to here
The `container’ background is possible (and I haven’t worked on it yet) but would get messy if we trying to grab a class from each button and then twist it to apply a bg color to the container.
I think it could be done much simpler if we use data-attributes but that’s another thing..perhaps for later.