[Resolvido] Javascript/Jquery?

Preciso fazer com que um menu apareça ao passar o mouse vou citar aqui o css e o jquery/javascript

HTML

<div id="phrase">Uma frase qualquer</div>
<div id="appear">
<a href="#" class="link">Link</a>
<a href="#" class="link">Link</a>
<a href="#" class="link">Link</a>
<a href="#" class="link">Link</a>
<a href="#" class="link">Link</a>
<a href="#" class="link">Link</a>
</div></div>

JQUERY

<script type="text/javascript">
$ (function() {
$('#phrase').mouseover(function(){
	$('#appear').slideDown(1000);
	});
});
$ (function () {
$('#appear').mouseout(function(){
	$('#appear').slideUp(1000);
});
});
</script>

CSS

#appear {
width:254px;
display:none;
background:#000;
}

a.link {

background:#fff;
text-align:center;
color:#000;
width:250px;
height:auto;
padding:2px;
margin-bottom:2px;
font-family: 'Averia Libre', cursive;
-webkit-transition:all 0.6s ease-out;
-moz-transition:all 0.6s ease-out;
transition:all 0.6s ease-out;
float:left;
font-size:12px;
}

a.link:hover {

-webkit-opacity:.6;
-webkit-transition:all 0.7s ease-out;
-moz-opacity:.6;
-moz-transition:all 0.7s ease-out;
opacity:.6;
transition:all 0.7s ease-out;
}

Explicando: Eu quero que quando eu passe o mouse na div "phrase" apareça a div "appear" e ela fique aparecendo por enquanto o mouse estiver sobre a frase ou os links, mas quando eu passo o mouse sobre a frase e vou passar o mouse nos links eles voltam a ficar "display:none;".

Alguém tem uma solução para isso?? Por favor é urgente!

Fecha, criei um monte igual sem querer :)

ADD DETALHES: Eu descobri que ao retirar o mouse do <a href="#" class="links">Link</a> o menu fecha. Eu preciso que ele só feche apos eu retirar o mouse da div pai, no caso a div appear. Alguém me ajuda???