Membuat Menu Vertical Cantik Nan Sederhana

ilustrasi

Masih soal penata rias di postingan yang ini Membuat Menu Horizontal Nan Cantik Dan Sederhana, kalau bingung maksud saya silahkan baca link diatas. *smile

Postingan ini masih nyangkut dengan postingan sebelah, jadi tidak perlu lagi admin bertele-tele, bahasa kerennya tudepoinajadeh, awas bahasa asing!.

Tanpa berpanjang-panjang lagi, makin panjang makin ngawur soalnya, berikut HTML dan CSSnya Menu Vertical.

 
HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
#navcontainer li { margin: 0 0 3px 0; }
#navcontainer a
{
display: block;
padding: 2px 2px 2px 24px;
border: 1px solid #333;
width: 160px;
background-color: #999;
background-image: url(images/l1_down.gif);
}
#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}
#navcontainer a:hover
{
border: 1px solid #333;
background-color: #F60;
background-image: url(http://css.maxdesign.com.au/listamatic/images/l1_down.gif);
color: #333;
}
#active a:link, #active a:visited, #active a:hover
{
border: 1px solid #333;
background-color: #FF6600;
background-image: url(http://css.maxdesign.com.au/listamatic/images/l1_over.gif);
color: #333;
} 

Demo

Sumber:

http://css.maxdesign.com.au/