Question

I am wondering if someone can tweak my code to get the functionality I am looking for. I am missing something in here. I am almost there. The problem is that when a menu item is selected from the list it is not moved up but duplicated. Then, if I click to drop down this menu again, then I’ll get two the same items in the menu. Ideally, I need the selected menu item to be moved to the top and do not have any duplicated content in the menu. Please take a look at my working prototype on jsfiddle in here:

DEMO

I also am wondering if you can position the text inside menu items to be alight in the middle and left margined to 10px. I tried to make it but this does not go easy I expected.
Many thanks in advance.

Answer 1

try this:

$(".dropdown dd ul li a").click(function() {
    $(".dropdown dd ul li a").css("display", "block");
    var text = $(this).html();
    $(this).css("display", "none");
    $(".dropdown dt a span").html(text);
    $(".dropdown dd ul").hide();
    $("#result").html("Selected value is: " + getSelectedValue("sample"));
});

http://jsfiddle.net/DAgGP/3/

for css part you can use text-indent:

.dropdown dd ul li a {
   text-indent: 10px;
}