I'm trying to build my own custom dropdown menu that should remember it's vertical position like a normal \[code\]<select>\[/code\] tag. The dropdown works fine already there is just this little thingy I want to improve.this is my html structure:\[code\]<div class="select width210" id="sortby1"> <ul> <li class="option darr" title="all">show all</li> <li class="option" title="published">published only</li> <li class="option" title="unpublished">private only</li> </ul> </div>\[/code\]this is my jquery:\[code\]/** * Select Boxes * */ var currentSelectDiv = null; $('.select ul li.option').click(function(e) { //storing the id attribute currentSelectDiv = $(this).parents("div.select").attr("id"); $(this).siblings().toggle().removeClass('darr'); $(this).addClass('darr'); }); $(document).click(function(e) { $('.select ul li.option').each(function() { // check IDs to make sure only closing other lis if( $(this).parents("div.select").attr("id") != currentSelectDiv) { if ( !$(this).is(":hidden" ) ) { $(this).not('.darr').toggle(); } } }); currentSelectDiv = null; });\[/code\]The problem is I can't actually explain the thing without referencing to a live example.http://jsfiddle.net/veUwn/As you can see the dropdown works like a charm. It behaves like an actual drop down where the \[code\]li.option\[/code\]'s are actually dropping DOWN. However I don't want them to dropdown but remain its vertical position just like the actual \[code\]select\[/code\] field underneath. If you select a option further down in the select field the vertical position of the select stays intact - so the options are not actually dropping down but just appear in a layer above.Any idea how I can achieve the same thingy with my own select.ul's ?Thank you for your help.edit:
