Is there a way to make nested Visual States? Perhaps by inheriting from other visual states?

Question

I'm making a nested/hierarchical menu using Visual States as my way of navigating. This works very nicely when going left to right in the menu. If I click Main Menu 3, it turns blue and the attached Sub Menu pops up, same thing if I click Sub Menu 2. The problem now is if I click Main Menu 1, Sub Menu 2 and SubSubMenu4 will remain "selected" (read: blue), although they will be removed from the screen.

My idea here is that I want a better structure for my Visual States. I think I need the following:

1. One Base State with everything unselected

Idea here being that whenever I hit a button, it will deselect everything, and remove all submenus. (Then repopulate if called by from an element further in).

2. 5 Main Menu States

These should ideally automagically inherit the base state so that I can't select them all at once, and only keep one sub menu open.

3. 5 * x Sub Menu States

For each Menu item, I need States for each of the Sub Menus within every Menu item, ideally these would go through the cycle again. Deselect everything, select the chosen Main Menu item then select the sub menu item, as well as open the respective subsubmenu.

4. 5 * x * x SubSub Menu States

You get the drift now, these should also deselect everything then reselected my previous choices.

So, has anyone a better idea how to solve this, as I am guessing this could potentially turn into a 100 States? Is there at least an easy way of making each Visual State inherit from its "parent"?

<TextBlock x:Name="MainMenu3" Text="MainMenu3" Foreground="Black">
  <i:Interaction.Triggers>
   <interactivity:RoutedEventTrigger RoutedEvent="interactivity:InteractionControl.TouchPress">
     <ei:GoToStateAction StateName="MainMenu3"/>
    </interactivity:RoutedEventTrigger>
   </i:Interaction.Triggers>
  </TextBlock>