Using Dynamic Navigation to Create a Static Subnavigation with a Little Bit of CSS and no JavaScript

Sometimes I tend to think too complicated. Working with a couple SharePoint navigation customizations involving e.g. a megamenu implementation (btw. I found this blog post highly helpful with that!), I was trying to accomplish something quite simple with a load of jQuery. Most certainly, that would have worked fine too, but when I, for a fleeting moment, wondered why it didn't (eh, I was still missing the jQuery reference), I realized I really did not need it at all.

In this particular case, I needed a two-level navigation, even though there was no real hierarchy, since everything was decidedly in one single team workspace. Yet, there was a logical hierarchy that had to be shown in the left hand side navigation. So, what I did after my futile jQuery excursion, was

1. to create a hierarchical managed navigation, with the terms pointing to pages that otherwise would have been a flat list in the navigation. 
2. to use the global navigation in place of the QuickLaunch as the left hand side navigation (in this case, it works much better)
3. changed the navigation parameters to orientation: horizontal, static display levels: 1, maximum dynamic display levels: 1
4. picked out the two CSS classes that make the dynamic navigation appear and dispappear:
   li.hover (hover being the class that SharePoint adds to the li.static.dynamic children on hover action)
   and li.hover-off (hover-off being the class that SharePoint adds to the mouseout action)
5. using the classes above, I set the dynamic navigation to never appear as a dynamic submenu:
   
   li.hover ul.dynamic, li.hover-off ul.dynamic {
       display:none !important;
       left: -9999px !important;
   }
   
6. then I set the dynamic menu of the selected static parent item to be displayed right below the parent item link:

li.selected ul.dynamic, li.selected.hover ul.dynamic, li.selected.hover-off ul.dynamic {
    border: medium none;
    box-shadow: none;
    color: #000000;
    display: block !important;
    left: 0 !important;
    padding: 0;
    position: relative !important;
    top: 0 !important;
}

With a little bit of other CSS modifications to the navigation items (for styling purposes), the menu then looked and behaved like this: