inline select - dropud snap
by sanford
HTML
<div id="main">
bleep<ol class="selektah sel8 allowupdown favorup">
<li class="sel">selectedone</li>
<li class="">option0 sdfdsf fsfs</li>
<li class="">option1</li>
<li class="">option2</li>
<li class="">option3 asdsad</li>
<li class="">option4</li>
<li class="firedisabled">option5</li>
<li class="">option6 bdbd ee 789123</li>
<li class="">option7 yeah</li>
<li class="">option8 jigs</li>
<li class="">option9 frog</li>
<li class="sel">selectedone</li>
</ol><span class="afterselektah">meep</span><span> sfdd my jolly falentine</span>
</div>
CSS
div#main {
font-size: 11px;
font-family: Verdana;
position:relative;
margin-top: 150px;
line-height:16px;
}
ol.selektah {
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
top: -6px;
bottom: auto;
display:inline;
position:absolute;
padding: 4px 4px 4px 4px;
border: 2px solid transparent;
}
li {
color: white;
ZZwidth: 70px;
max-width: 30px;
padding-right: 8px;
height:0;
opacity: 0;
overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;
transition-property: opacity;
transition-duration: 650ms;
-webkit-transition-property: opacity;
-webkit-transition-duration: 650ms;
-moz-transition-property: opacity;
-moz-transition-duration: 650ms;
}
.selektah:hover LI {
background-image: none;
}
.selektah LI.sel /* provisional in case of downonly */
,.selektah.allowupdown.sel0 LI:first-child + LI
,.selektah.allowupdown.sel1 LI:first-child + LI + LI
,.selektah.allowupdown.sel2 LI:first-child + LI + LI + LI
,.selektah.allowupdown.sel3 LI:first-child + LI + LI + LI + LI
,.selektah.allowupdown.sel4 LI:first-child + LI + LI + LI + LI + LI
,.selektah.allowupdown.sel5 LI:first-child + LI + LI + LI + LI + LI + LI
,.selektah.allowupdown.sel6 LI:first-child + LI + LI + LI + LI + LI + LI + LI
,.selektah.allowupdown.sel7 LI:first-child + LI + LI + LI + LI + LI + LI + LI + LI
{
width:auto;
max-width:70px;
color: red;
opacity: 1;
height:auto;
background-image: url(http://127.0.0.1/otherpeople/arrow-dropupdown-9.gif);
background-repeat: no-repeat;
background-position: right center;
}
.selektah:hover LI.sel /* provisional in case of downonly */
,.selektah.allowupdown.sel0:hover LI:first-child + LI
,.selektah.allowupdown.sel1:hover LI:first-child + LI + LI
,.selektah.allowupdown.sel2:hover LI:first-child + LI + LI + LI
,.selektah.allowupdown.sel3:hover LI:first-child + LI + LI + LI +...