MCDC style dd

by sanford

HTML

<ol>
    <li class="asvalue"><div class="asoption"><i>Remove filter</i></div><div class="asvalue">Filter by composer &raquo;</div></li>
    <li class="ZZasvalue"><div class="asoption">Forsythe "Jughead" Jones</div><div class="asvalue">Juggie</div></li>
    <li class="ZZasvalue"><div class="asoption">Louis "Satchmo" Armstrong</div><div class="asvalue">Satchmo</div></li>
    <li class="ZZasvalue"><div class="asoption">Milton "Mezz" Mesirow</div><div class="asvalue">Mezz</div></li>
</ol>

CSS

body { padding: 50px; font-family: Verdana; font-size: .78em; }
ol {
    width: 200px;
    position: relative;
    padding-top: 50px;
}
li {
    display: none;
    border: 1px solid silver;
    border-width: 1px 0 1px 0;
    color: gray;
    height: 50px;
    width: 100%;
    margin-top: -1px;
    padding: 10px;
}
ol:hover li { 
    display:block; 
    background-color: gainsboro;
}
ol:hover li:hover {
    background-color: yellowgreen;
    color: beige;
    cursor: pointer;
}
li div.asvalue, li.asvalue div.asoption {
    display: none;
}
li.asvalue, ol:hover li.asvalue {
    display: block;
    position: absolute;
    top: -21px;
    background-color: steelblue;
    color: white;
    font-weight: bold;
    cursor: default;
    border-top-color: transparent;
}
li.asvalue div.asvalue {
    display: block;
}

JavaScript

$$('li').addEvent('click',function() {
    $$('li').removeClass('asvalue'); // remove class from all LIs
    this.addClass('asvalue'); // add it back to the selected one
    $$('li:not(.asvalue)').setStyle('display','none'); // flash off the dropdown menu so it doesn't stay open (dropped down)
    (function(){ 
        $$('li:not(.asvalue)').setStyle('display',''); // turn the menu back on ready for next click
    }).delay(40);

});