javascript - Customized Drop Down List -

javascript - Customized Drop Down List -

so i'm designing customized dropdownlist need create normal drop downwards list user here html

class="snippet-code-html lang-html prettyprint-override"><div class="select" id="long"> <img src="img/pin.jpg" class="select_img" /> <div class="select_text"> newsletter </div> <div class="select_arrow"> <> </div> <ul> <li>this</li> <li>that</li> <li>duck</li> <li>deck</li> </ul> </div> <div class="select" id="short"> <img src="img/clk.jpg" class="select_img" /> <div class="select_text"> contact </div> <div class="select_arrow"> <> </div> <ul> <li>this</li> <li>that</li> <li>duck</li> <li>deck</li> </ul> </div> </div>

so see have here 2 dropdownlist items 1 long , other short , here css

/*id's*/ img#logo {display: inline-block;float: left; height: 55px; width: 155px;} div#long {margin-left: 330px;} div#long .select_text { width: 85px;} div#long ul {width: 147px; display: none;} div#short {margin-left: 16px;} div#short .select_text { width: 57px;} div#short ul {width: 119px; display: none;} /* classes */ .select{ position: relative; height: 31px; display: inline-block; float: left; margin-top: 10px; font-family: nexa; color: #959595; font-size: 10px; } .select_img{ display: inline-block; float: left; width: 31px; height: 31px; background-color: #fff; cursor: pointer; } .select_text{ display: inline-block; float: left; height: 31px; background-color: #fff; cursor: pointer; text-indent: 3px; line-height: 32px; } .select_arrow{ display: inline-block; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); background-color: #ebebeb; color: #959595; width: 31px; height: 30px; border-bottom: 1px #d8d8d8 solid; font-size: 11px; line-height: 32px; text-indent: 6px; font-family: quicksand; font-weight: bold; cursor: pointer; text-indent: 10px; } .select ul li{ text-indent: 34px; width: 100%; background-color: #fff; cursor: pointer; } .select ul li:hover{ background-color: #f26c4f; }

now, question is:

when click on of div.select children want show ul of same div clicked, tried $(this).children('ul).slidedown('normal'); didn't work :(

i need way this, want utilize $(this) selector

i don't want utilize way this:

$('#select_img, #select_text, select_arrow').click(function(){ $('#long ul').slidedown('normal'); });

i want generic: when click on of div elements ul shows.

$(this).find('ul').slidedown('slow');

assuming $(this) grabbed correctly, don't think 'normal' alternative slidedown()

javascript jquery html css jquery-selectors