Make a Simple CSS Dropdown Hover Technique.

Melanjutkan tema postingan sebelumnya mengenai bumpy lists for full style lists content. Jadi artikel sekarang masih berkutat seputar klik srot merosot :P Ada yang bilang dropdown dan ada pula yang berkata select box! Kalau dilihat-lihat berbeda namun ada kemiripan dalam fungsinya? Satu yg pasti tetap srot merosot bro =)) Sekarang AA Koben akan berbagi tutorial bagaimana cara membuat CSS dropdown with hover. Jadi ketika melakukan sorot, akan merosotlah konten...tidak perlu repot-repot ;))

.dropdown {
z-index: 1000;
position: relative;
margin: auto;
width: 250px;
border-radius: 3px;
-webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 1);
box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 1);
}
.dropdown .selection {
position: relative;
cursor: pointer;
background-color: #F1F1F1;
color: #737373;
padding: 10px;
z-index: 100;
border-radius: 3px;
margin-top: 20px;
}
.dropdown .selection:after {
position: absolute;
content: '';
top: 50%;
right: 8px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border: 8px solid transparent;
border-bottom: 0;
border-top: 8px solid #737373;
width: 0;
}
.dropdown .options {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
position: absolute;
top: 100%;
min-width: 100%;
background-color: #FFF;
height: 0;
overflow: hidden;
-webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 1);
box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 1);
}
.dropdown .options div {
padding: 0 10px;
cursor: pointer;
line-height: 1.5;
}
.dropdown .options div:hover {
background-color: #F1F1F1;
color: #333;
-webkit-box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 1);
box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 1);
}
.dropdown:hover .options {
height: auto;
padding: 10px 0;
}
.dropdown:hover .selection {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.dropdown:hover .selection:after {
border: 8px solid transparent;
border-top: 0;
border-bottom: 8px solid #737373;
}

<div class="dropdown">
<div class="selection">Selected</div>
<div class="options">
<div>List 1</div>
<div>List 2</div>
<div>List 3</div>
<div>List 4</div>
<div>List 5</div>
<div>List 6</div>
<div>List 7</div>
<div>List 8</div>
<div>List 9</div>
</div>
</div>

DEMO: codepen.io/beben-koben/full/xVooVq/

Ada satu lagi yang unik dan simpel, namun ada persamaan. A Pen By Kriszta talk about Card fold down effect with dynamic height. Jika sobat berminat, AA sudah meminimalisir kode yg ada tanpa mengurangi gaya full.

.task {
width: 50%;
min-width: 300px;
margin: 0 auto;
position: relative;
overflow: hidden;
cursor: pointer;
-webkit-perspective: 800px;
perspective: 800px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.abstract,.details {
width: 100%;
color: #282828;
padding: 1px 20px;
position: relative;
background: #fafafa;
}
.task:hover .abstract, .task:hover .details {
background: #fafafa;
}
.abstract {
-webkit-transition: .3s ease all;
transition: .3s ease all;
}
.details {
max-height: 0;
padding: 0;
overflow: hidden;
visibility: hidden;
-webkit-transform: rotateX (-180deg);
transform: rotateX (-180deg);
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: .3s transform ease;
transition: .3s transform ease;
}
.details:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 1px;
background: grey;
}
.task:hover .details {
max-height: none;
overflow: visible;
visibility: visible;
-webkit-transform: rotateX (0deg);
transform: rotateX (0deg);
}
.details__inner {
padding: 1px 20px;
}

<div class="wrap">
<div class="task">
<div class="abstract">
<h3>TITLE</h3>
<p>This is sub TITLE.</p>
</div>
<div class="details">
<div class="details__inner">
<h3>When HOver</h3>
<p>This additional content when hover.</p>
</div>
</div>
</div>
</div>

Dah begitu saja ya!

BONUS:
CSS only Select - Dropdown Menu Animation - Select Box with Placeholder [CSS Only] - Facebook Reactions (Mother's day sneak peak) - Distorted Button Effects with SVG Filters - Masking in the Browser with CSS and SVG - Making a scroll-dependent menu bar with CSS3 and JavaScript - Animated Transition Effects - CSS Dropdowns - How TO - Hoverable Dropdown - It's Drop Down but It's Select Box too Use CSS