css - Why will my other child div not move on hover? -

so have situation :

<div class="relations-container">     <div class="relations">     <ul>       <? while($relatedvideo = mysql_fetch_array($relatedvideos)){ ?>     <li><p><a href="?prodid=<?=$relatedvideo['recproductid']?>"><?             =$relatedvideo['rectitle']?></a></p></li>       <? } ?>     </ul>     </div>          <? } ?>      <div class="relations-button">      </div> </div> 

so have container div "relations-container", contains 2 child divs "relations" , "relations-button"

my css follows :

.relations-container{ height:82px; width:auto; position:relative; bottom:456px; float:left; }  .relations {  width:720px; height:50px; background: rgb(255, 255, 255); border:dotted #333 1px; float:left; position:relative;  }  .relations ul {     list-style: none; } .relations ul li{ margin-left:10px; width:20%; float:left; }  .relations ul li p {  font-family: verdana; font-size:10px; color:#666; }  .relations-button{ height:30px; width:30px; background-color:rgb(0, 51, 153); float:left;  } 

what trying achieve here when hover on div "relations-button" moves div "relations" down 50px. thought :

.relations-button:hover + .relations{ position:relative; top:50px } 

does know why div isnt moving ?

you have use jquery (javascript) you're trying achieve.

$('.relations-button').hover( function() {     $('.relations').css('top', '50'); }, function() {     $('.relations').css('top', '0'); }); 

here's live example showcase how works better understanding: http://jsfiddle.net/rxb9g/1/