Making a JQuery button act as a dropdown

Question

Take this JQuery UI Button sample as a reference: http://jqueryui.com/demos/button/#splitbutton

Now, how would you implement that dropdown when click the small button? M

Answer 1

HTML:

 
    ∨ Choose your option...
    
    

        
One
        
Two
        
Three
    

CSS:

.arrow
{
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    font-size: 0.8em;
    font-weight: bold;
    height: 26px;
    left: 208px;
    line-height: 26px;
    position: absolute;
    text-align: center;
    vertical-align: middle;
    width: 26px;
    z-index: 100;
}

.selectBox
{
    border: 1px solid #1F1F1F;
    list-style-type: none;
    margin: 0;
    padding: 3px;
    position: absolute;
    width: 200px;
    display:none;
    top: 25px;
}

#container
{
    position:relative
}

.toggler
{
    overflow:visible;
}

.default
{
    border: 1px solid #1f1f1f;
    width:200px;
    height:20px;
    padding:3px;
    position:absolute
}

.selectBox li:hover
{
    background:#ffffd
}

JQUERY:

$('.arrow').click(function() {
    $('.selectBox').slideToggle(200).css('borderTop', 'none');
    $('.selectBox li').click(function() {
        $('.mehidden').val($(this).text());
        $('.default').text($(this).text());
        $('.selectBox').slideUp(200);
    });
});