Fake Dropdown Menu
HTML
<div class="drop-wrap">
<div class="result">Pick yer font</div>
<div class="drop">
<label><span class="font-text">Font Style 1</span> <input type="radio" name="font"></label>
<label><span class="font-text">Font Style 2</span> <input type="radio" name="font"></label>
<label><span class="font-text">Font Style 3</span> <input type="radio" name="font"></label>
<label><span class="font-text">Font Style 4 </span> <input type="radio" name="font"></label>
<label><span class="font-text">Font Style 5</span> <input type="radio" name="font"></label>
<label><span class="font-text">Font Style 6</span> <input type="radio" name="font"></label>
<label><span class="font-text">Font Style 7</span> <input type="radio" name="font"></label>
<label><span class="font-text">Font Style 8</span> <input type="radio" name="font"></label>
<label><span class="font-text">Font Style 9</span> <input type="radio" name="font"></label>
<label><span class="font-text">Font Style 10</span> <input type="radio" name="font"></label>
</div>
</div>
CSS
.drop-wrap {
width:140px;
height:15px;
padding:5px 5px 5px 5px;
border:1px solid #000;
position:relative;
}
.drop {
position:absolute;
width:150px;
max-height:150px;
overflow:auto;
top:25px;
left:0;
background:#eee;
border:1px solid #000;
}
.drop input[type="radio"] {
display:none;
}
.drop label {
display:block;
}
JavaScript
$('.drop label').click(function(){
var labelText = $(this).find('.font-text').html();
$('.result').html(labelText);
});
$('.result').click(function() {
$('.drop').slideToggle('fast');
});
$('.drop').click(function() {
$(this).slideUp('fast');
});