Your javascript should look like this:
$('.selectCover').find('button').click(function(){
$(this).parent().find('ul').slideDown(100,function(){
$(this).mouseleave(function(){
$(this).slideUp(100);
});
});
});
$('.selectCover li').click(function(e){
$.post('x').done(function(){
console.log($(e.target).attr('data-branch'));
$(e.target).parent().attr('currsel',$(e.target).attr('data-branch'))
});
$(this).parent().slideUp(100);
});
There are 2 problems in your code:
There was a problem with your click events. Both click listeners where triggered because they were both clicked when you click an "li" element. This was caused by the click event on the complete container, and the click events on the sepperate "li" elements. Clicking an "li" element would also cause a click event on the complete container (thous your first declared listener would trigger again).
The second problem is that you put the height to the element to 0. slideDown() doesn't seem to update the DOM height value correctly, so the background gets drawn with 0 height.
I put the first click event on the button so it will not trigger when you click an "li" element.
here's your new fiddle: