You don’t have to have the second tier items flyout, they can be static. In fact, for your footer I would suggest static placement.
Either way, when styling Hubspot generated menus you will find some key classes within the structure (view the source code or check in the element inspector). You can target these classes to make the magic happen.
as an example, list items with a sub menu have a class that is something like “.has-children” (not exactly this but similar) so it would look like this:
<ul>
<li class="has-children">
<ul>
<li></li>
</ul>
</li>
<li></li>
</ul>
so you could target the sub menu like:
li.has-children ul {
}
li.has-children:hover ul {
}
li.has-children ul li {
}
Check check out the source code for the classes.
Just a note, having the menu titles as first tier menu items is actually the more complicated option. not only will you need to figure out have to display the menu to look like your example but you will have to reverse hubspots default second tier styling from positions to hover effects if you are using Hubspots default stylesheets. It’s my favorite option but not the easiest. If you want easy just go with the option of create an advanced menu for each section.