CSS scrolling ol experiment

by sanford

HTML

<ol class="scroll">
    <li class="scroll">&nbsp;</li>
    <li class="scroll">&nbsp;</li>
    <li class="scroll">&nbsp;</li>    
    <li class="scroll">&nbsp;</li>
    <li class="scroll">&nbsp;</li>
    <li class="scroll">&nbsp;
    <ol class="drop">
        <li>Item A</li>
        <li>Item B</li>
        <li>Item C</li>    
        <li>Item D</li>
        <li>Item E</li>
        <li>Item F</li>    
        <li>Item G</li>
        <li>Item H</li>
        <li>Item I</li>    
        <li>Item J</li>
        <li>Item K</li>
        <li>Item L</li>    
    </ol>
    </li>    
</ol>

CSS

BODY { padding: 20px; font: 11px Verdana;}
LI { 
    background-color: chocolate;
}

LI.scroll {
        cursor:pointer;
    height: 36px;
    background-color: lightblue;
}
LI.scroll:last-child {
    float:left;
    width:6px;
}

OL.scroll {
    width: 6px;
    position:relative;
}
OL.drop {
    position:absolute;
    top: 0;
    left: 7px;
    width: 100px;
    height: 216px;
    overflow:hidden;
}
li.scroll:hover {
    background-color: yellowgreen;
}
li.scroll:hover + li.scroll + li.scroll ol li:first-child {
    margin-top: -50px;
}
li.scroll:hover + li.scroll ol li:first-child {
    margin-top: -100px;
}
li.scroll:hover ol li:first-child {
    margin-top: -150px;
}
OL.drop LI:hover {
    background-color: steelblue;
    color: beige;
}
OL.drop:hover LI {
    margin-top: 0 !important;
}
OL.drop LI {
    border-bottom: 1px solid white;
    height: 20px;
    padding: 2px 0 2px 5px;
}