Bootstrap3のナビゲーションバーをhover化する方法

bootstrap3

javascript - Bootstrap Dropdown with Hover - Stack Overflowにまさにやりたいことが書いてあった。
ここに書いてある通り、

.dropdown:hover .dropdown-menu {
  display: block;
}

と書くのが一番シンプルそう。ただし、モバイルサイズの時もこのhoverが効いてしまってイマイチなレイアウトになっちゃうので、下記のように@mediaでPCサイズの時だけ有効になるように設定すると良さげ。

@media (min-width: 768px) {
    .dropdown:hover .dropdown-menu {
        display: block;
    }
}

デモ