dropdown

by karin

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<ul>
    <li>Coffee <span class="ui-icon ui-icon-carat-1-s"></span>

    </li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

CSS

ul {
    list-style-type:none;
    border:thin solid #0D69B5;
    width:100px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    /* future proofing */
    -khtml-border-radius: 10px;
    /* for old Konqueror browsers */
    -webkit-padding-start: 0px;
}
ul li {
    padding:3px;
    margin-left:none;
}
li:hover {
    background:rgba(0, 0, 224, 0.2)
}
span {
    display:inline;
    float:right;
    margin:1px;
}

JavaScript

var opt1 = $("ul li:first-child");
var opt2 = $("ul li:nth-child(2)");
var opt3 = $("ul li:nth-child(3)");
opt2.hide();
opt3.hide();


$("li").click(function () {
    $("li").toggle("fast", function () {
        // Animation complete.
        $(this).show();
    });
});