Membuat Vertikal Menu dengan CSS

Sebelumnya,pernah tau khan yang namanya menu navigasi..?
Biasanya dalam website,menu navigasi menjadi sesuatu yang mutlak harus ada.Nah, untuk menu navigasi dalam tiap website,itu berbeda-beda,tergantung dengan tema website itu sendiri.Kadang ada yang condong ke menu navigasi horizontal ataupun vertikal.

CSS sendiri memberikan kelebihan dalam pembuatan layout menu tersebut.Dengan sedikit sentuhan CSS,menu navigasi kita yang sebelumnya kelihatan kaku,akan terliha lebih stylish.

Nah sekarang aku akan membahas cara membuat menu vertikal dengan menggunakan CSS.

Sekarang kita persiapkan terlebih dahulu tag HTMLnya seperti di bawah ini:

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Suport</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

Nah,akan muncul tampilan seperti di bawah ini:


* Home
* Services
* Suport
* About Us
* Contact Us


OK..memang tampilan pertama kita sangat kaku.Nah disinilah CSS diperlukan untuk memperbaiki tampilan yang masih kaku itu.
Ok,langsung aja kita pasang kode CSSnya..sebagai berikut :

#nav {
margin: 0;
padding: 0;
list-style-type: none;
background-color: #663300;
width: 180px;
float: left;
}
#nav li {
margin: 0;
padding: 0;
float:left;
width:100%;
}
#nav a {
display: block; /* untuk memperbesar area klik karena tag a defaultnya inline
*/
color: #FFF;
text-decoration: none;
padding: 0 15px;
line-height: 2;
border-bottom:1px solid #FFF;
}
#nav a:hover {
background: #330000;
}

Dan...Bla..bla.bla...
Nah,setelah sedikit sentuhan CSS yang bisa dibilang agak ribet,tapi mengasyikkan.
SELAMAT MENCOBA..!!