I have an interesting challenge for a menu design.
It seems deceptively simple at first sight but you will run into some issues.
Here is a codepen of the menu as-is (I might be fiddling with it here and there depending on when you click the link): https://codepen.io/zackw/pen/KyaQLO?editors=1100
I've listed "rules" for the menu regarding its style, those are important and it's why the menu is so difficult to style. I have a screenshot of what the end result is supposed to be like in the pen.
It's 98% done, it's the border issue that is halting progress.
I call it the impossible menu because it seems whatever technique I try, one or more rules end up being broken. anchor link borders, highlights, LI borders, negative margin border tricks, fancy css sibling/descendent selector chains, pseudo elements as borders, border images, border backgrounds. Just having no luck.
Then again, it could be one of those super easy techniques I should have tried first but didn't and then never thought of it again kind of things.
The solution to the problem can contain extra markup or classes if needed, but clean source is good, as well as non-fragile uncomplicated css.