Gostaria de criar um menu suspenso personalizado que funcione em todos os navegadores. Eu criei um aqui, mas a seta não é clicável. Se eu configurá-lo como plano de fundo para o select, o firefox sobrescreverá uma seta sobre ele. Alguém pode me dizer qual é a melhor técnica para obter um menu suspenso personalizado que funcione em todos os navegadores e como eu faço esse botão clicável sem JavaScript?

http://jsfiddle.net/DJDf8/1/

CSS:

#menulist {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 32px;
  border: 1px solid #000;
  width: 260px;
  text-indent: 8px;
}

.arrow {
  cursor: pointer;
  height: 32px;
  width: 24px;
  position: absolute;
  right: 0px;
  background-color: #c8c8c8;
  background: url('http://icons.aniboom.com/Energy/Resources/userControls/TimeFrameDropDownFilter/Dropdown_Arrow.png') 0;
}

<span style="position:relative;">
         <span class="arrow" ></span>
<select id="menulist">
         <option value="one">One</option>
         <option value="two">Two</option>
</select>
</span>