TUTORIAL™

--✽ ✽ ✽--ASSALAMU'ALAIKUM--✽ ✽ ✽--

apa kabar sobat semuah seperti biasa kami mau berbagi sedikit tutorial yaitu
Cara Menu Horizontal ol Style
Biasanya ol atau Before di buat untuk mempercantik Label Atau Populr Post
nah tapi kali ini di buat Untuk Menu dan aq namakan Cara Menu Horizontal ol Style.
terserah sobat mau kasih nama apa gak ada yang nglarang ko hehehhe...?

-✽ ✽ ✽-- Silakan lihat demo di bawah ini bos--✽ ✽ ✽--

1. Home
2. Css
3. Template
   1. Trik Facebook
   2. Modiv Kolom Komentar
   3. Wisata
4. Daftar Harga
5. Menu Pilian

1. Test-Test
2. Daftar isi
3. Benner Sahabat
   1. Tuker Linik
   2. Sahabat
   3. Award
4. Facebbok
5. Gmail

-✽ ✽ ✽-- silakan Copy Kode css di bawah ini--✽ ✽ ✽--

 ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 15px 'trebuchet MS', 'lucida sans';
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
ol ol{
margin: 0 0 0 2em;
}
.rounded-list a{
position: relative;
display: block;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .5em 0;
-webkit-box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);-moz-box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);border:solid 1px #2a54aa;
color: #444;
text-decoration: none;
-moz-border-radius: .3em;
-webkit-border-radius: .3em;
border-radius: .3em;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;	
}
.rounded-list a:hover{
background: #00ff00;
}
.rounded-list a:hover:before{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);	
}
.rounded-list a:before{
content: counter(li);
counter-increment: li;
position: absolute;	
left: -1.3em;
top: 50%;
margin-top: -1.3em;
background: #87ceeb;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid #0000ff;
text-align: center;
font-weight: bold;
-moz-border-radius: 2em;
-webkit-border-radius: 2em;
border-radius: 2em;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.rectangle-list a{
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 2.5em;
-webkit-box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);-moz-box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);border:solid 1px #2a54aa;
color: #444;
text-decoration: none;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;	
}
.rectangle-list a:hover{
background: #0000ff;
}	
.rectangle-list a:before{
content: counter(li);
counter-increment: li;
position: absolute;	
left: -2.5em;
top: 50%;
margin-top: -1em;
background: #fa8072;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
.rectangle-list a:after{
position: absolute;	
content: '';
border: .5em solid transparent;
left: -1em;
top: 50%;
margin-top: -.5em;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;				
}
.rectangle-list a:hover:after{
left: -.5em;
border-left-color: #fa8072;				
}

-✽ ✽ ✽--Silakan Kopy Kode Divnya di bawah--✽ ✽ ✽--

<ol class="rounded-list">
<li><a href="">Home</a></li>
<li><a href="">Css</a></li>
<li><a href="">Tutorial</a>
<ol>
<li><a href="">Menu</a></li>
<li><a href="">Menu</a></li>
<li><a href="">Menu</a></li>
</ol>
</li>
<li><a href="">Menu</a></li>
<li><a href="">Menu</a></li>                       
</ol>
<ol class="rectangle-list">
<li><a href="">Test-Test</a></li>
<li><a href="">Menu</a></li>
<li><a href="">Menu</a>
<ol>
<li><a href="">Menu</a></li>
<li><a href="">Menu</a></li>
<li><a href="">Menu</a></li>
</ol>
</li>
<li><a href="">Menu</a></li>
<li><a href="">Menu</a></li>                       
</ol>

Sekian dulu dari kami tentang postingan

Cara Membuat Menu Horizontal ol Style

semoga bermanfa'at buat sobat yang membutuhkannya amin..?