Erro ao mostrar e ocultar Div

Olá amigos do forum,

Estou precisando colocar um efeito para mostrar div e ocultar a div ao clicar no menu.

Segue link do site www.truqys.com.br (botão produtos)

Esta funcionando porem precisar clicar 2x para que o sub-menu apareça.

Segue o código que estou utilizando.

<script type="text/javascript">
function exibe(id) {
	if(document.getElementById(id).style.display=="none") {
 document.getElementById(id).style.display = "inline";
	}
	else {
 document.getElementById(id).style.display = "none";
	}
}
</script>

<div id="topo">
	<div id="menu">
 <img src="lib/img/menu-topo.png" width="955" height="205" usemap="#Map" border="0" />
 <map name="Map" id="Map">
 <area shape="rect" coords="33,71,126,111" href="[http://www.truqys.com.br/site/sobre-a-truqys](http://www.truqys.com.br/site/sobre-a-truqys)" />
 <area shape="rect" coords="164,71,278,114" onclick="javascript: exibe('sub-menu-produtos');" />
 <area shape="rect" coords="672,73,748,108" href="[http://www.truqys.com.br/dicas/teste](http://www.truqys.com.br/dicas/teste)" />
 <area shape="rect" coords="776,75,924,110" href="[http://www.truqys.com.br/contato](http://www.truqys.com.br/contato)" />
 <area shape="poly" coords="364,162,442,192,528,186,600,154,623,113,588,53,488,31,425,34,342,71,329,120" href="index.htm" />
 </map>

 <div id="sub-menu-produtos"><img src="lib/img/menu-topo_produtos.png" width="309" height="34" usemap="#produtos" border="0" />
 <map name="produtos" id="produtos">
 <area shape="rect" coords="31,5,98,31" href="[http://www.truqys.com.br/gato/comedouro-quad](http://www.truqys.com.br/gato/comedouro-quad)" />
 <area shape="rect" coords="123,4,209,31" href="[http://www.truqys.com.br/passaro/balanco](http://www.truqys.com.br/passaro/balanco)" />
 <area shape="rect" coords="239,6,291,29" href="[http://www.truqys.com.br/cao/bebedouro-osso](http://www.truqys.com.br/cao/bebedouro-osso)" />
 </map>
 </div>

 </div>

</div>

Obrigado pela ajuda de todos