FIrst Posted in 2016 Year

Postingan perdana di awal tahun 2016 AA Koben akan membahas tentang variabel <ul> atau <ol> Dengan var ul/ol tersebut kita bisa membuat aneka karya cipta yang mempesona ;))
Unordered atau ordered list ternyata tidak sesederhana kelihatannya. Berikut contoh sederhana kreasi ol/ulSelain berdiri sendiri variable ol|ul bisa dipadukan dengan varible lainnya. Sehingga akan terjadi campur aduk di sana dan menghasilkan drop down Take a look small dropdown menu

.sdm a {
background: #f65041;
color: inherit;
display: block;
text-decoration: none;
padding: 1rem;
}
.sdm ul {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4rem;
letter-spacing: .1rem;
position: relative;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}
.sdm ul ul a:hover,.sdm ul ul a:focus,.sdm ul ul a:active {
background: #ff7d74;
}
.sdm ul ul {
display: none;
padding-top: 1rem;
position: absolute;
}
.sdm ul:hover ul,.sdm ul:focus ul,.sdm ul:active ul {
display: block;
}
.sdm ul:first-child:hover > li:first-child:before,.sdm ul:first-child:focus > li:first-child:before,.sdm ul:first-child:active > li:first-child:before {
border: .7rem solid transparent;
border-top-color: #fff;
}
.sdm ul ul > li:not( :last-child ) {
border-bottom: 2px solid #ff7d74;
}
.sdm ul > li:first-child:before {
content: "";
position: absolute;
}
.sdm ul:first-child > li:first-child:before {
border: .7rem solid transparent;
border-top-color: #fff;
pointer-events: none;
right: 1.3rem;
top: 1.6rem;
}
.sdm ul ul > li:first-child:before {
border: .7rem solid transparent;
border-bottom-color: #f65041;
top: -.4rem;
right: 1.3rem;
}
.sdm .fa {
margin-right: .5rem;
}

<div class="sdm">
<ul>
<li><a href="#">What...!!!</a>
<ul>
<li><a href="#"><span class="fa">&#10084;</span>Like</a></li>
<li><a href="#"><span class="fa">&#10032;</span>Favorites</a></li>
<li><a href="#"><span class="fa">&#10068;</span>Discuss</a></li>
</ul>
</li>
</ul>
</div>

Ada yg lebih ekstrim lagi dengan menyertakan jQuery script! Coba lihat dulu halaman berikut Pada bagian country ada variabel dropdown disertai animation effect. Begitu saja first post in 2016 year.

This is some bonus for you:
>> Jemoticons
>> Ace Editor
>> Web Terminal
>> Tabs Modal
>> Corner Ribbons
>> gradStop.js
>> Simple SVG Editor
>> Flexbox Film Credits
>> CSS Social Ribbon Flags
>> Pixelate an image
>> Expanding Share Button
>> Modal/blurred background
>> Generate palettes from an image
>> Smooth, Semantic Tab Box
>> CSS sliding multi-level accordion
>> Login For Webapp Using CSS and Javascript
>> ReboundGen, Pre-Canned CSS3 animations
>> Awesome Jumping Game Using CSS and Javascript
>> A Style Switcher with Pure CSS using :checked
>> Collapsable link lists with CSS only (no JS)
>> View/Hide - Content & Change title text onclick
>> COLOR.JS a color manipulation library
>> CSS Only Dropdowns With The Checkbox Hack