CSS導航下划線實現

  在做頁面的時候發現頁面導航欄有一個很棒的效果。具體的效果就是，當鼠標移到一個導航欄時，導航欄下方會緩慢出現一條線。

當用ui內聯的方式實現普通的導航后，在html中的li添加一個class用來控制下划線的移動。

html部分：

 <div class="top">
    <ul>
        <li>首頁</li>
        <li>最新活動</li>
        <li>項目介紹</li>
        <li>愛心社區</li>
        <li>關於我們</li>
        <li class="move"></li>
    </ul>
        </div>

css部分，主要是對move部分的控制。對move部分設置border-top並設置寬度，設置position屬性調整下划線
位置使下划線處於導航欄的下方。另一個重點就是用trisition對width實現效果的漸變.

css部分：

#d1 .top ul {
    display: inline-block;
    position: absolute;
    right:20%;
    margin-top: -44px;
    box-sizing: border-box;
    cursor: pointer;
}
#d1 .top ul li{
    padding: 2px;
    color: #4E3A4F;
    list-style: none;
    display: inline-block;
    margin: 10px;
    float: left;
    box-sizing: border-box;
    -webkit-transition: color 0.4s ease-in-out;
    -moz-transition: color 0.4s ease-in-out;
    -ms-transition: color 0.4s ease-in-out;
    -o-transition: color 0.4s ease-in-out;
    transition: color 0.4s ease-in-out;
    -webkit-transition: border 0.4s ease-in-out;
    -moz-transition: border 0.4s ease-in-out;
    -ms-transition: border 0.4s ease-in-out;
    -o-transition: border 0.4s ease-in-out;
    transition: border 0.4s ease-in-out;
}
#d1 .top ul li:hover{
    color: red;
}
#d1 .top ul li.move{
    width: 65px;
    border-top: 4px solid red ;
    position: absolute;
    top: 31px;
    left: 35px;
    -webkit-transition: left 0.4s ease-in-out;
    -moz-transition: left 0.4s ease-in-out;
    -ms-transition: left 0.4s ease-in-out;
    -o-transition: left 0.4s ease-in-out;
    transition: left 0.4s ease-in-out;
}

關鍵部分在於這里對left的設置，設置hover時，move也就是下划線出現的位置，通過hover不同的塊使left不斷改變實現下划線的移動。
#d1 .top ul li:nth-child(1):hover~.move{
    left: 0;
}
#d1 .top ul li:nth-child(2):hover~.move{
    left: 20%;
}
#d1 .top ul li:nth-child(3):hover~.move{
     left: 40%;
 }
#d1 .top ul li:nth-child(4):hover~.move{
      left: 60%;
  }
#d1 .top ul li:nth-child(5):hover~.move{
       left: 80%;