title: TypeScript coded menu and Grid not displaying correctly
body: <p>So I am trying to create a menu which derives its elements from code. This is to make it much easier to add new elements, and/or in the future put the menu items into a database to make them easier to edit and add to without recompiling.</p>
  <p>I want the menu to look like this:</p>
  <p><a href="https://i.stack.imgur.com/RXvnY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RXvnY.png" alt="The intended design" /></a></p>
  <p>However the behavior is currently not working very well, i.e.</p>
  <p><a href="https://i.stack.imgur.com/Zit5c.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zit5c.gif" alt="The current behavior of the menu" /></a></p>
  <p>I have created a stackblitz here: <a href="https://stackblitz.com/edit/angular-ivy-ejlj7n?file=src/app/app.module.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ivy-ejlj7n?file=src/app/app.module.ts</a></p>
  <p>I have tried a bunch of stuff, such as creating a sub grid for each hover section, setting width for items, rearranging what is listed in each grid section etc- but im not sure what else I can do. The erratic nature clearly comes from the fact that elements are moving when hovered over.</p>
  <p>Another issue is that submenus are opening up in the same column as their master, not spanning the entire width of the grid, which I suspect is because those divs are (by necessity to create a HTML/CSS only menu system) sub-divs of their owning menu item.</p>
  <p>Thanks!</p>