[Résolu] Fonction hover qui pose souci

Salut tout le monde,

Alors comme le dit le titre j'ai un petit problème avec mon hover.
En gros j'aimerais que mon nav apparaisse lorsque je survole ma div circle.
Et jusqu'à présent quoique je fasse rien ne se passe.
Du coup je me demandais si quelqu'un pouvait jeter un coup d'oeil à mon code

<div class="container">
 <div id="menu">
   <div id="circle"><a href="#"></a></div>
    <nav>
        <ul>
          <li><a href="#"><span id="portfolio"><h2>PORTFOLIO</h2></span></a></li>
          <li><a href="#"><span id="blog"><h2>BLOG</h2></span></a></li>
        </ul>
    </nav>
  </div>
</div>

.container {
    width: 960px;
    margin: 0 auto;
    position:relative;}


#circle {
    width: 100px;
    height: 100px;
    -moz-border-radius: 120px;
    -webkit-border-radius: 120px;
    border-radius: 120px;
    border: 5px solid black;
    margin: 40px auto;}

nav {
    display:none;
    margin:0 auto;}

#circle:hover nav{
    display:block;}

li{
    display:inline-block;
    width:1px;}

#portfolio{
    float:left;
    width: 30px;
    height: 30px;
    background: white;
    -moz-border-radius: 120px;
    -webkit-border-radius: 120px;
    border-radius: 120px;
    border:solid black 5px;
    margin-left:90px;
    transition-property: width,height;
    transition-duration:3s;}

li:hover #portfolio{
    width:50px;
    height:50px}

#blog{
    float:left;
    width: 30px;
    height: 30px;
    background: white;
    -moz-border-radius: 120px;
    -webkit-border-radius: 120px;
    border-radius: 120px;
    border:solid black 5px;
    margin-left:-150px;
    transition-property: width,height;
    transition-duration:3s;}

li:hover #blog{
    width:50px;
    height:50px}

En vous remerciant d'avance pour vos éclaircissements

Ton nav n'est pas dans ton #circle, ils sont "frères" et non "enfant", du coup il ne trouve pas

#circle:hover nav {

}

Je vois il doit obligatoirement faire partie de la div pour que le hover fonctionne... Plutôt logique.
Merci beaucoup JC

Bonjour,

Pas obligatoirement, ça peut marcher avec un sélecteur d'adjacence (directe ou indirecte).
http://www.alsacreations.com/article/lire/1312-selectionner-les-freres-d-un-element-en-css-nth-child.html

#circle:hover + nav {
     /* nav directement frere de #circle */
}
#circle:hover ~ nav {
     /* nav frère de #circle */
}