Mendesain Menu (Horizontal) dengan CSS

Perbedaan menu vertikal dengan horizontal adalah:
· Lebarnya jauh lebih lebar dari menu vertikal
· Teks nya berada di tengah
· Setiap elemen berada di sisi elemen lainnya, bukan di bawah elemen lainnya.
Untuk mendesain menu horizontal, kita hanya tinggal memodifikasi beberapa kode CSS dari
menu Vertikal. Kode yang harus dimodifikasi adalah
· Kita perlu mengubah width dari elemen ul karena tidak diperlukan lagi 100%
· Elemen a tidak memerlukan display:block, karena akan di-float
· Karena kita membuat teks menjadi di tengah, padding kanan dan kiri bisa dihapus
· Border pun diubah dari bottom menjadi right
Kode hasil modifikasi menjadi sbb:

#nav {

margin: 0;

padding: 0;

background: #663300;

list-style-type: none;

float: leftfloat: left; /* Contain floated list items */

}

#nav li {

margin: 0;

padding: 0;

float: left;

}

#nav a {

float: left;

width: 127px;

text-align: center;

color: #FFF;

text-decoration: none;

line-height: 2;

border-right: 1px solid #FFF;

}

di petik dari IlmuKomputer.Com