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

演示地址：http://1.jonathanzhang.sinaapp.com/

仅仅给ul的每个li的内容添加a标签后，就是下面的样子的

演示地址：http://2.jonathanzhang.sinaapp.com/
ul菜单代码

                        

                            News
                            

                                
New  Zealand
                                
Australia
                                
Britain
                                
France
                            
                        

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环境)