HTMLとCSSの話なので、直接WordPressのカスタマイズの話ってわけではないと思うんですが、せっかくなのでいくつかアドバイスを。
まず、Chrome,IE11でとお書きですが、それ以外にもほとんどのブラウザで同じようになると思います。つまりこうなるのがブラウザ的には正しい挙動というわけです。
２行になるのを回避する方法はあるのでしょうか？
ないことはないですが、あまりスマートではないです。
文字サイズを数値固定しても、ブラウザの文字倍率を変更すれば2行になってしまいます。
2行にならないようにするには、以下の方法でしょうか。
1. li要素かa要素1つ1つにwidth指定をする
→メニュー項目が今後増えたり変わるときはCSSも変更必要になります。
2. テキストではなく画像にしちゃう
→現状、WordPressのカスタムメニュー機能を使っているので、画像にすると柔軟性が落ちますね。。。
どちらもデメリットが多いように感じます。
こういう構造にする場合、むしろ2行になっても見た目におかしくない作りにしてしまうほうが理にかなっていると思います。たとえば、ulの背景自体を紫にしておくとか。
その場合、hoverでborder-bottom 1pxを足すようになっていますが、これだと2行になったとき高さがズレてしまうので、もとのリンクにもborder-bottom:1px solid #FFFを付けておくとベターでしょう。
Web制作現場では、まずはじめにナビゲーションの増減が頻繁にあるかないかをまず検討し、「見た目の固定化」か「機能性・柔軟性」か、どっちを取るかというところを検討してからデザイン制作やコーディングに入るというフローになることが多いと思います。
手間と見た目がトレードオフになってしまうのはある程度受け入れるべきかなぁと、個人的には思います。（プロの制作案件だとそうも言ってられないことは多いですが）
mypacecreator様, ご回答ありがとうございます。
色々と教えていただき、たいへん参考になりました。
2行になった時に違和感がないコーディングが必要なのですね。
さっそく試してみたいと思います。
