Make Line Tree Navigation Pure Use CSS

Koben akan berbagi membuat navigasi sederhana dari kehebatan kode CSS seperti Make TreeVew Menu Without JavaScript! Murni memakai variabel CSS2 memudahkan sobat dalam memakainya :)
Ide ini datang dari MediaLoot salah satu web kumpulan premium design resources for you. Bisa belajar atau jadi member di sana guna menjadi profesional blogger :d Menu navigasi sekarang ini sejenis tree-menu, tetapi tidak bisa di hide/show ;) Jadi terpampang dan jelas terlihat. Cocok banget bagi designer pemula seperti kita-kita ;))

Dibutuhkan 2 buah image >> " & " Save img tersebut dan hostingkan.

Kode CSS

.main_nav {
        float: left;
        width: 370px;
        margin-left: 5px;
        font-size: 14px;
    }
.main_nav ul {
        float: left;
        display: inline;
        width: 175px;
        margin-right: 5px;
        color: #cbd6e2;
        padding: 10px 0 0 0;
list-style-type: none;
background: url(PNG Image, 1×10 pixels.png) left repeat-y;
    }
.main_nav ul li {
        float: left;
        width: 145px;
        padding-left: 23px;
        line-height: 145%;
background: url(PNG Image, 20×1 pixels.png) 0 bottom no-repeat;
    }
.main_nav ul li.mains_sub {
background: url(PNG Image, 20×1 pixels.png) 0 17px no-repeat;
    }
.main_nav ul li a {
        color: #c48962;
        position: relative;
        top: 7px;
    }
.main_nav ul li a:hover {
        color: #cbd6e2;
    }
.main_nav ul ul {
        width: 132px;
        margin: 8px 0 0 15px;
        padding- top:0;
    }
.main_nav ul ul li {
        width: 100px;
    }

Don't forget to change url image! Kemudian kode HTMLnya deh.

Syntax HTML

<div class="main_nav">
<ul>
<li class="mains_sub">
<a href="/">Main</a>
<ul>
<li><a href="#">Main</a></li>
<li><a href="#">Main1</a></li>
<li><a href="#">Main2</a></li>
</ul>
</li>
<li class="mains_sub"><a href="#">Main1</a>
<ul>
<li><a href="#">Main1</a></li>
<li><a href="#">Main1-2</a></li>
</ul>
</li>
<li><a href="#">Main2</a></li>
</ul>
<ul>
<li class="mains_sub">
<a href="#">Main-A</a>
<ul>
<li><a href="#">Main-A-1</a></li>
<li><a href="#">Main-A-2</a></li>
<li><a href="#">Main-A-3</a></li>
<li><a href="#">Main-A-4</a></li>
<li><a href="#">Main-A-5</a></li>
</ul>
</li>
<li><a href="#">Main-B</a></li>
<li><a href="#">Main-C</a></li>
</ul>
</div>SAVE. Lihat hasil kerja. Thanks @medialoot :)
http://geeksretreat.wordpress.com/2012/07/15/swinging-with-html5-and-css3-transitions/
Happy navigasi \m/