Question

I am trying to make circle navigation animated with CSS, but the problem is that when the mouse hovers over one of the menu links, all the menus use the effect that I wanted to be only on the selected link. Is there is any way to do this?

here is the link for my result: http://jsfiddle.net/amromar/Fgnmw/

CSS:

#nav li {
list-style:none;
list-style-type:none;
display:table-cell;
ul.box li {  
    display: block;
    width:100px;height:100px;border-radius:1000px;font-size:20px;color:#fff;line-height:100px;text-align:center;background:#000; 

}
ul.box li{ -webkit-transition: width 0.2s ease, height 0.2s ease;  
    -moz-transition: width 0.2s ease, height 0.2s ease;  
    -o-transition: width 0.2s ease, height 0.2s ease;  
    -ms-transition: width 0.2s ease, height 0.2s ease;  
    transition: width 0.2s ease, height 0.2s ease; 
    overflow: hidden; }  

ul.box:hover li{  
display: block;
      width:200px;height:200px;border-radius:1000px;font-size:30px;color:#fff;line-height:100px;text-align:center;background:#333;
      overflow: hidden;  
} 

HTML:

<ul class="box" id="nav" >
<li >home</li>
<li><a href="#">about</a></li>
<li>our tour</li>
<li>contact</li>
<li>hellow</li>
</ul>

Answer 1

I originally thought (and had posted then deleted) that you just needed to change the :hover to the li element, so this selector ul.box:hover li to this ul.box li:hover. But that was only part of the solution, because the sizing problem was your display: table-cell on the li elements, which was forcing them to expand to the height of the wrapper. I believe I have come up with an acceptable solution to get what you seem to want to achieve (has similar effects as the display: table-cell only without the height issue).

Here is the fiddle.

CSS

#nav { 
   max-width: 500px; /* this keeps your five circles no more than 100px wide */
   margin: 20px auto; /* only needed if you are centering the nav */
   /* optional; you may want to clear the floats or give the nav a "float" to wrap
      the nav around the floated children inside. Whether you need to do this or 
      not depends on your application*/
}

#nav li {
   list-style:none;
   list-style-type:none;
   display:block;
   float: left;
}

ul.box li{  
    width:20%; /* Using the wrapper to set the width, 100px will be max without animation */
    height:100px; /* Keep the height fixed, even if narrow width "squeezes" the circle */
    border-radius:50px; /* half the max-width is all you need */
    font-size:20px;
    color:#fff;
    line-height:100px;
    text-align:center;
    background:#000;     
}

ul.box li { /* no changes here */
    -webkit-transition: width 0.2s ease, height 0.2s ease;  
    -moz-transition: width 0.2s ease, height 0.2s ease;  
    -o-transition: width 0.2s ease, height 0.2s ease;  
    -ms-transition: width 0.2s ease, height 0.2s ease;  
    transition: width 0.2s ease, height 0.2s ease; 
    overflow: hidden; 
}  

ul.box:hover li {
    /* cause the other li's to "shrink" to 
       accomodate the larger size of the one being hovered */
    width: 15%; 
}

ul.box li:hover {  
      width:40%; /* animate to twice the size for the one being hovered */
      height: 200px; /* make twice the fixed height */
      border-radius:100px;
      font-size:30px;
      color:#fff;
      line-height: 200px;
      text-align:center;
      background:#333;  
}