鼠标悬停 二级菜单不显示，Jquery哪里不对啊？

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二级菜单</title>
<script type="text/javascript" src="jquery-3.2.0.js"></script>
<style type="text/css">
a{
    color:#FFF;
    text-decoration:none;
}
.first,.second
{
    list-style:none;
}
.first>li
{
    float:left;
}
.second
{
    padding:0px;
}
.first>li>a
{
    background:grey;
    color:#FFF;
    margin-left:1px;
    width:100px;
    padding-top:10px;
    padding-bottom:10px;
    text-align:center;
    display:block;
}

.second>li>a
{
    width:100px;
    background:blue;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:0px;
    margin-top:1px;
    margin-left:0px;
    text-align:center;
    display:none;
}

</style>
</head>

<body>
    <ul class="first">
    <li>
        <a href="javascript:void(0)">固话业务</a>
        <ul class="second">
            <li><a href="javascript:void(0)">400电话</a></li>
            <li><a href="javascript:void(0)">401电话</a></li>
            <li><a href="javascript:void(0)">402电话</a></li>
        </ul>
    </li>
    <li>
        <a href="javascript:void(0)">宽带业务</a>
        <ul class="second">
            <li><a href="javascript:void(0)">8兆宽带</a></li>
            <li><a href="javascript:void(0)">16兆宽带</a></li>
            <li><a href="javascript:void(0)">24兆宽带</a></li>
        </ul>
    </li>
    <li>
        <a href="javascript:void(0)">帮助与支持</a>
    </li>
</ul>

<script type="text/javascript">
        $('ul.first>li>a').hover(function(){
            $(this).css('background','red');
            $(this).next().children().has('a').css('color','black').show();
        },function(){
            $(this).css('background','grey');
            $(this).next().children().has('a').css('display','none');
        });
</script>

</body>
</html>

jquery路径对了没有？而且2+的jquery不支持ie8-，注意浏览器兼容性
has改为find


        $('ul.first>li>a').hover(function () {
            $(this).css('background', 'red');
            $(this).next().children().find('a').css('color', 'black').show();
        }, function () {
            $(this).css('background', 'grey');
            $(this).next().children().find('a').css('display', 'none');
        });

做二级下拉菜单方法很多，可有用添加删除类的方法，你用的是改变css样式，你布局是什么样的/