Me gustaría hacer un menú desplegable personalizado que funcione en todos los navegadores. He creado uno aquí, pero la flecha no se puede hacer clic. Si lo configuro como el fondo para la selección, entonces Firefox sobrescribirá una flecha en la parte superior. ¿Alguien puede decirme cuál es la mejor técnica para obtener un menú desplegable de apariencia personalizada que funcione en todos los navegadores y cómo puedo hacer que se pueda hacer clic en este botón sin 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>