自定义下拉列表

所以我正在设计一个自定义的下拉列表，我需要将其作为用户的普通下拉列表这是HTML

<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>

正如你所看到的，我这里有两个DropDownList项目，一个是长的，另一个是短的这是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;
}

现在，我的问题是：

当我点击任何一个div.select子项时，我想显示我点击的同一div的ul，我尝试了$(this).children('ul).slideDown('normal');，但没有成功：（

我需要这样的方法，我想使用$(this)选择器

我不想使用这样的方式：

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

我希望它是通用的：当我点击任何一个div元素时，它的ul就会显示出来。