鼠标滑走，下划线也跟着划走，用什么方法

如果需要动画效果，在监听到鼠标移到某个导航项时，改变下划线的位置。用css3的transition或者js动画来完成过渡效果。

如果鼠标移上去有，鼠标移走导航栏，一个下划线都没有
那就用：hover伪类选择器实现CSS样式

如果下划线一直有，鼠标移到另一个导航项，下划线跑过去
那你首先自己可以设置一个.hover类，CSS实现下划线样式，然后将其初始只赋给当前页导航项，其余的导航项没有这个类

对于每一个导航项监听鼠标事件，如果鼠标移上去就将被本来设为.hover类的项移除.hover类，并且当前项的class中加上.hover类

//写在一起了，jQuery版本

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jQuery.js"></script>
    <style>
        .active{
            border-bottom: 3px solid #4b4;
        }
        ul{
            height:80px;
            border: 1px solid #ddd;
            font-size:0;
        }
        ul li{
            display: inline-block;
            height:50px;
            width:90px;
            text-align: center;
            line-height: 50px;
            color:#333;
            border-bottom: 3px solid #ccc;
            margin: 0px;
            padding: 0px;
            font-size:16px;
            font-family: "Microsoft YaHei",sans-serif;
        }
    </style>
    <script>
        $(function(){
            var lis=$("li");
            $.each(lis,function(i){
                $(lis[i]).mouseenter(function(e){
                    $(".active").removeClass('active');
                    $(this).addClass('active');
                });
            });
        });
    </script>
</head>
<body>
    <ul>
        <li class="active">首页</li>
        <li>第一页</li>
        <li>第二页</li>
        <li>第三页</li>
    </ul>
</body>
</html>

【热门文章】