悬停不会影响嵌套元素

Question

我正在尝试使用Less：

编写一个简单的导航栏

.navbody {
        display:table-cell;
        padding-left:20px;
        ul {
            .clearMP;
            li {
                .clearMP;
                display:table-cell;
                height:@navheight;
                vertical-align:middle;
                &:hover {
                    background-color:darken(#fafafa,30%);
                    cursor:pointer;
                    a {
                        color:white;
                        border:1px solid black;
                    }
                }
                a {
                    display:block;
                    &:link,&:visited {
                        font-size:15px;
                        color:black;
                        text-decoration: none;
                        padding:0 10px;
                    }
                    &:hover,&:active {
                        color:white;
                    }
                }
            }
        }
    }

HTML CODE：

<div class='navbody'>
    <ul>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Documention</a></li>
        <li><a href='#'>Downloads</a></li>
        <li><a href='#'>Contact</a></li>
   </ul>
</div>

当li元素悬停时，我正试图这样做，a颜色将变为白色。我试过了 li:hover a方法，但不起作用。 我现在知道只有color:white不起作用，但如果我尝试更改边框，它确实有效。