Railsで簡単にメニューバーを作る方法

備忘を兼ねて。
ヘッダ下などに横長（Horizontal）のメニューバーを簡単に作る方法です。

1._html.erb
ホーム画面とメニュー1～5の各画面へのリンクがあるようなメニューバーです。
メニュー2にはさらに4つのサブメニューがあります。

<div id='menu'>
<ul>
   <li><%= menu_link_to "Home", root_path %></li>
   <li><%= menu_link_to "Menu1", "#" %></li>
   <li class='has-sub'><%= menu_link_to "Menu2", :items %>
      <ul>
         <li><%= link_to "Menu2-1", "#” %></li>
         <li><%= link_to "Menu2-2", "#” %></li>
         <li><%= link_to "Menu2-3", "#” %></li>
         <li class='last'><%= link_to "Menu2-4", "#” %></li>
      </ul>
   </li>
   <li><%= menu_link_to "Menu3", "#" %></li>
   <li><%= menu_link_to "Menu4", "#" %></li>
   <li class='last'><%= menu_link_to "Menu5", "#" %></li>
</ul>
</div>

2.CSS
各メニューを横並びに表示させます。
また、メニュー2にカーソルが乗った時にメニュー2のサブメニューを縦並びにドロップダウン（？）で表示させます。
※色や幅、フォントサイズなどは適当です。

/* 親メニュー */
#menu {
  width: auto;
}
#menu > ul {
  background-color: #123456;
  position: relative;
  font-size: 18px;
}
#menu > ul li {
  list-style: none;
  width: 120px;
}
#menu > ul > li {
  float: left;
  background-color: #987654;
  color: white;
  position: relative;
  display: block;
  line-height: 32px;
  text-align: center;
  vertical-align: middle;
}
#menu > ul > li > a {
  background-color: #123456;
  display: block;
  padding: 7px 30px;
  color: white;
  text-align: center;
  text-decoration: none;
  line-height: 18px;
}
#menu > ul > li:hover > a {
  background-color: #bbb;
}
#menu > ul > li > a > span {
  line-height: 18px;
}

/* 子メニュー */
#menu > ul ul {
  visibility: hidden;
  position: absolute;
  width: 120px;
  background-color: blue;
  z-index: -1;
}
#menu > ul li:hover ul {
  opacity: 1;
  visibility: visible;
  color: #000;
  z-index: 2;
  top: 32px;
  left: 0;
}
#menu > ul ul li {
  list-style: none;
  width: 100%;
}
#menu > ul ul li a {
  padding: 7px 0px 7px 0px;
  background-color: blue;
  display: block;
  color: white;
  font-size: 14px;
  text-decoration: none;
}
#menu > ul ul li a:hover {
  background-color: #30308b;
}

CSSが無駄に長い気がしてならない。