UL Select Box

Default Select Box Alternative, by using ul and li

HTML

<a href="#" id="submit"> Get Value</a>
<ul>
    <li >[SELECT]</li>
    <li data-value="value 1">Option 1</li>
    <li data-value="value 2">Option 2</li>
    <li data-value="value 3">Option 3</li>
</ul>

CSS

ul { 
    height: 30px;
    width: 150px;
    border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

JavaScript

$("ul").on("click", ".init", function() {
    $(this).closest("ul").children('li:not(:nth-child(1))').slideDown();
});

var allOptions = $("ul").children('li:not(:nth-child(1))');
$("ul").on("click", "li:not(:nth-child(1))", function() {
    allOptions.removeClass('selected');
    $(this).addClass('selected');
    $("ul").children('.init').html($(this).html());
    allOptions.slideUp();
});


$("#submit").click(function() {
    alert("The selected Value is "+ $("ul").find(".selected").data("value"));
});