通过ul li标签实现二级菜单后添加a标签出现的问题

菜单实现后，弹出、悬浮变色什么的都没有问题
如图：

<ul class="nav_ul">
                        <li>
                            News
                            <ul class="nav_ul_sub">
                                <li><a target="_self" href="article.html">New&nbsp;&nbsp;Zealand</a></li>
                                <li><a target="_self" href="article.html">Australia</a></li>
                                <li><a target="_self" href="article.html">Britain</a></li>
                                <li><a target="_self" href="article.html">France</a></li>
                            </ul>
                        </li>


css代码：

.nav_ul,.nav_ul li{
    height: 30px;
    display: inline-block;
}
.nav_ul li{
    line-height: 30px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 20px;
    font-weight:  bolder;
    font-family: 'Microsoft YaHei', 'WenQuanYi Micro Hei','museo_slab' 'tohoma,sans-serif';
    color: white;
    position: relative; /*子菜单出现位置基准*/
}
.nav_ul li:hover{
    background:#000000;
}
.nav_ul_sub{
    display: none;
    position: absolute;
    top: 29px;
    left: 0;
    background: #2F3237;
}
.nav_ul_sub li{
    height: 30px;
    width: 100%;
    display: block;
    background:#000000;
    border-top: 1px solid  #2F3237;
}
.nav_ul_sub a{
    display: block;
    text-decoration: none;
    font-size: 20px;
    font-weight:  bolder;
    font-family: 'Microsoft YaHei', 'WenQuanYi Micro Hei','museo_slab' 'tohoma,sans-serif';
    color: white;
}
.nav_ul_sub a:hover{
    text-decoration: none;
}
.nav_ul_sub a:active{
    text-decoration: none;
}
.nav_ul_sub a:visited{
    text-decoration: none;
}
.nav_ul_sub li:hover{
    background:#2F3237;
}

更具体代码在上面两个地址都有

请问产生这种情况的原因是什么？如何修改？

(chrome环境)