I've got carried away!

I have reworked the 'simple' into a chimera!

The code now allows you to use any number of symbol menus on the one page.
Xara doesn't let you add a ClassName or ID to a Group; it just disappears.

All the menu entries are grouped and some more CSS finds the parent and changes it to a fixed position.
Firefox still does not recognise the :has() function so I had to compromise with some JavaScript that only fires up for that browser. So my aspiration of a pure CSS menu has been tainted (only 3% (Egg!) use Firefox) but obviously you have to meet expectations.
I then had fun with Full Width as it ends up plastered above everything else. i had to develop my own flavour to find Firefox is a PITA. Anyhow I cheated with putting the Stick at the Top yellow bar at the sides of the Pasteboard as well.

I finally, changed most things that can be altered to CSS Variables so you can change values there and not mess with the rest of the CSS.

Do treat as EXPERIMENTAL.
I will make it work for my needs and if you report an issue, I may consider fixing it but there are no promises.

CSS - Main & Variant Symbol Menu.xar

Acorn