These technique basically has the same advantages and disadvantages as the previous one, but comes with the great benefit not wasting that much space.

The “Priority +” pattern

Going one step further I tried to improve the previous example by making the Sub-Navigation also available with one click/tap, but came to the conclusion that it’s not really possible by just using CSS. If you expand the top navigation to all elements and try to access the Sub-Navigation via [+] all the “less-prio” list-items will be hidden again. You may can avoid it by using some fake elements and the nth-child() selector but I didn’t really want to go that nasty.

Conclusion

As already mentioned in the beginning I couldn’t really find the clever solution, but I personally would use the “Priority” pattern as it’s a clean way with great browser support, although you get to see the Sub-Navigation only after taping twice on touch devices. The “Priority +” pattern somehow solves the “double tap problem”, but is on the other hand irritating and not really user friendly.

That said, I would in the end use some JavaScript to imitate the :hover Effect for touch devices, as it’s, as far as I can see, the only way to make that work in a clean way.