css - 悬停不适用于整个街区

Question

我正在尝试为整个 anchor 元素创建悬停效果，但它不起作用，一旦鼠标离开文本，下拉菜单就会消失:

Here是测试站点。

CSS:

.menu{}
.menu li{float:left;margin-right:24px;list-style-type:none;height:46px;}
.menu li a{width:100%;text-transform: uppercase;color:#39444A;text-decoration:none;font-weight: bold;font-size:18px;display:block;height:46px;}
.menu li a:hover{border-bottom-style: solid;border-bottom-width: 2px;border-bottom-color: #E87D05;color:#E87D05;height:46px;display:block;}
ul.sub_navigation , .sub_navigation
{
    position: absolute;
    display: none;
    z-index: 100;
    background-image: url('/images/menu-bg-png.png');
    background-repeat:repeat-y;
    padding:10px 0px 10px 28px;

 }

我哪里弄错了？

Answer 1

CSS(添加):

.menu li a {
    position: relative;
    z-index: 5;
}