Responsive nav menu

The objective is to create a responsive nav menu that uses the browsers native text-overflow:ellipsis capability. This will make for a much more dependable control then one that needs JS to calculate if items do not fit in the width allowed.

Items that do not fit are truncated and an ellipsis shows there are more items. The ::focus pseudo selector is used to open the nav on the FOCUS and BLUR events.

About the technique: For text-overflow:ellipsis to create a usable ellipsis the child elements must be inline elements.