相邻兄弟选择器（+）

      今天在做导航栏的时候，需求里面需要实现一个小的动画效果，需求：导航栏中，鼠标移入每个链接，链接字体颜色发生改变，同时导航栏下面的小点圆圈移动到相对应的位置。因为需要兼容IE8的缘故，动画使用JQuery的animation函数来实现的。当完成导航栏的制作后，我突发奇想如果不需要用到任何JS是否可以实现该动画。
先看下测试中导航栏的代码

HTML

<div class="nav">
    <ul>
        <li class="a">第一个导航</li>
        <li class="b">第二个导航</li>
        <li class="c">第三个导航</li>
        <li class="circle"></li>
    </ul>
</div>

CSS

    li{
   display: inline-block;margin: 0 20px;padding: 20px 40px;}