hover em um elemento

Tenho o seguinte codigo:

<div>

 <a id="menu">menu</a>

</div>

<div>

<div>....

</div>

<div>....

</div>

<div id="conteudo" </div>

gostaria de dar hover no elemento id="menu" e fazer aparecer o elemento id="conteudo".

Como eu faço isso? estou tentando usar o css abaixo preciso da ajuda pra usar os seletores certo!

#conteudo{

display: block;

visibility: hidden;

opacity: 0;

height: 0;

overflow: hidden;

transition-property: opacity;

transition-duration: .25s;

transition-delay: .25s;

-webkit-transition-property: opacity;

-webkit-transition-duration: .25s;

-webkit-transition-delay: .25s;

}

#menu:hover{

 opacity: 1;

 visibility: visible;

 height: auto;

 color: #777;

 }

agradeço a ajuda!