Sharp Menu

細い文字に細い線、結構好みな感じ。SoundCloud のタブ ( .streamExploreTabs ) を見て真似した ( 見た目だけ ) 。

• Demo | JSFiddle

.menu {
  margin: 2em;
  padding-left: 0;
  height: 1.6em;
  border-bottom: 1px solid #eee;
  text-transform: uppercase;
  list-style: none;
}

.menu li {
  display: inline-block;
  margin-right: 1em;
  height: 1.6em;
}

.menu-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.menu-link:hover {
  border-bottom: 1px solid black;
}

.menu-link.is-active {
  border-bottom: 1px solid tomato;
}

本当は非アクティブメニューにマウスオーバーしたとき、アニメーションなんかを付けてもう少し工夫したかったんだけど上手いことできなかった。アクティブメニューの下につけてる赤線を左右に移動させたりしてみたかったんだけど難しい。

li:nth-child(1):hover + .bar-line とかやってたら余計な指定が増えたりして訳がわからなくなった。