Lisboa91

O problema era a animação da transição. Cada vez que a div se movia o evento era disparado. Crie uma div separada do menu pra servir só pra detecção do mouse:

<div id="menu-handler">
</div>
<div id="menu">
    <div id="menu-close"></div>
    <div id="menu-open">
        <ul>
            <li class="m-home"><a href="index.html">HOME</a></li>
            <li class="m-empresa"><a href="agencia.html">EMPRESA</a></li>
            <li class="m-servicos"><a href="portfolio.html">SERVIÇOS</a></li>
            <li class="m-clientes"><a href="clientes.html">CLIENTES</a></li>
            <li class="m-contato"><a href="contato.html">CONTATO</a></li>
        </ul>
    </div>
</div>

Depois acrescente o CSS:

#menu-handler {
	position:fixed;
	right:0;
	bottom:0;
	z-index:999999;
}

E modifique o JS:

$(document).ready(function() {
	$("#menu-open").hide(1);
	$("#menu-close").show(1000);
	$('#menu-handler').mouseover(function() {
		$("#menu-open").show(1000);
		$("#menu-close").hide(1000);
		$("#menu-handler").height(341);
		$("#menu-handler").width(339);
	});
	$('#menu-handler').mouseout(function() {
		$("#menu-open").hide(1000);
		$("#menu-close").show(1000);
		$("#menu-handler").height(178);
		$("#menu-handler").width(176);
	}).mouseout();
});

LeoB, primeiramente muiiiito obrigado, cara! Mas ainda não deu certo, dessa vez não consigo clicar no link que está dentro da div #menu-open.

http://agenciacreati....br/teste-menu/

Sim. Aí você precisa ajustar seu javascript. Colocando #menu-open dentro de #menu, não vai acontecer o problema de mouseout que você encontrou. Pra trabalhar com o hide e show como você quer, talvez precisa de mais divs.

<div id="menu">
   <div id="menu-close">...</div>
   <div id="menu-open">...</div>
</div>

Assim os eventos de mouse ficam em #menu, mas quem some ou aparece são as internas.

LeoB, na realidade ele ficou fazendo o evento show/hide igual um doido agora, pois o mouseout não está sendo gerado de acordo com o que eu gostaria (igual do início).

O código ficou assim:

<script>
$(document).ready(function() {
$('#menu').ready(function() {
$("#menu-open").hide(1);
$("#menu-close").show(1000);
});
$('#menu').mouseover(function() {
$("#menu-open").show(1000);
$("#menu-close").hide(1000);
});
$('#menu').mouseout(function() {
$("#menu-open").hide(1000);
$("#menu-close").show(1000);
});
});
</script>

<!-- Menu -->
<div id="menu">
<div id="menu-close"></div>
<div id="menu-open">
<ul>
<li class="pg1"><a href="index.html"><img src="imagens/meio/m-home.png" /></a></li>
<li class="pg2"><a href="empresa.html"><img src="imagens/meio/m-empresa.png" /></a></li>
<li class="pg3"><a href="servicos.html"><img src="imagens/meio/m-servicos.png" /></a></li>
<li class="pg4"><a href="clientes.html"><img src="imagens/meio/m-clientes.png" /></a></li>
<li class="pg5"><a href="contato.html"><img src="imagens/meio/m-contato.png" /></a></li>
</ul>
</div>
</div>

Eu devo estar fazendo alguma coisa MUITO errada e não estou percebendo. :s

Coloque #menu-open dentro de #menu.

Nesse caso, você diz no html ou no javascript? Pois inseri no html e quando dou mouseover em #menu as duas div's se comportam com hide, na realidade, preciso que a #menu-open fique show.