Menu horisontal

Mengapa dengan CSS? mengapa tidak dengan JavaScript?

Pada prinsipnya loading CSS lebih cepat dari pada JavaScript. Inilah alasannya mengapa kita lebih mengutamakan menggunakan CSS ketimbang JavaScript. JavaScript memang bisa melakukan operasi apa saja dalam website, tapi performance CSS masih lebih baik. Jika bisa dilakukan dengan CSS kenapa harus JavaScript.

Menu horisontal atau dropdown menu umumnya terdapat pada setiap website. Menu digunakan untuk memudahkan kita melakukan navigasi content dalam sebuah website.

Untuk membuat menu horisontal, pertama kita tulis struktur HTML-nya berikut ini.

<ul id="menu">
  <li><a href="">Home</a></li>
  <li><a href="">About</a>
  	<ul>
      <li><a href="">The Team</a></li>
      <li><a href="">History</a></li>
      <li><a href="">Vision</a></li>
    </ul>
  </li>
  <li><a href="">Products</a>
  	<ul>
      <li><a href="">Cozy Couch</a></li>
      <li><a href="">Great Table</a></li>
      <li><a href="">Small Chair</a></li>
      <li><a href="">Shiny Shelf</a></li>
      <li><a href="">Invisible Nothing</a></li>
    </ul>
  </li>
  <li><a href="">Contact</a>
  	<ul>
      <li><a href="">Online</a></li>
      <li><a href="">Right Here</a></li>
      <li><a href="">Somewhere Else</a></li>
    </ul>
  </li>
</ul>
</body>

Setelah itu kita buat presentasinya dengan CSS berikut ini.

ul {
	font-family: Arial, Verdana;
	font-size: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
ul li {
	display: block;
	position: relative;
	float: left;
}
li ul {
	display: none;
}
ul li a {
	display: block;
	text-decoration: none;
	color: #ffffff;
	border-top: 1px solid #ffffff;
	padding: 5px 15px 5px 15px;
	background: #2C5463;
	margin-left: 1px;
	white-space: nowrap;
}
ul li a:hover {
	background: #617F8A;
}
li:hover ul {
	display: block;
	position: absolute;
}
li:hover li {
	float: none;
	font-size: 14px;
}
li:hover a {
	background: #617F8A;
}
li:hover li a:hover {
	background: #95A9B1;
}

Menu dropdown horisontal ini juga dapat bekerja dengan baik di browser MSIE.