Если долго не извращаться то так... подогнать под вид селекта мона через css
меняя div.menu, div.select.
klayers - взять на сайте (ссылку где то здесь уже давал)
<style>
div.menu{position:absolute; top: 0px; left:0px; visibility:hidden;}
table.menu{border-collapse: collapse; width: 150px;}
table.menu tr, table.menu td{padding:0px; margin:0px;}
a.menu, div.select a{display:block;width:150px;color:black;text-decoration:none;}
div.select a{cursor:hand;}
a.select:hover{background-color: #316AC5; color:#fff;}
a.menu:hover, div.select a:hover{background-color: #316AC5; color:#fff;}
</style>
</head>
<script src="includes/js/klayers.js"></script>
<script>
last="";
function showMenu(src, target){
// hideMenu();
m1=layer(src);
m2=layer(target);
last = target;
m2.moveTo(m1.getAbsoluteLeft(), m1.getAbsoluteTop()+ 4 + m1.getHeight()); // move second menu relatively
m2.show();
event.cancelBubble = true;
}
function hideMenu(){
if (last != ""){
m2=layer(last)
m2.hide()
}
}
document.onclick = hideMenu;
</script>
<body>
<div class="select" id="select">
<a class="select" href="#" onclick="showMenu('select', 'menu'); return false;">Меню</a>
</div>
<div class="menu" id="menu">
<table class="menu">
<tr><td><a href="" class="menu">Первое меню</a></td></tr>
<tr><td><a href="" class="menu">Второе меню Второе меню</a></td></tr>
<tr><td><a href="" class="menu">Третье меню Третье меню Третье меню</a></td></tr>
<tr><td><a href="" class="menu">Четвертое меню</a></td></tr>
</table>
</div>
</body>
</html>