CSS背景颜色过渡效果不佳

您好，我有这段代码：将鼠标悬停在a标签上时，过渡效果很好，但是文本消失了。我该如何解决这个问题？

<header>
    <ul class="menu">
        <li><a href="#">main</a></li>
        <li><a href="#">about us</a></li>
        <li><a href="#">brands</a></li>
        <li><a href="#">gallery</a></li>
        <li><a href="#">contact</a></li>
    </ul>
</header>

<style type="text/css">

header ul li a {
    text-decoration: none;
    color: #333946;
    font-size: 20px;
    padding: 20px;
    -webkit-transition: background-color 0.5s; /* For Safari 3.1 to 6.0 */
    transition: background-color 0.5s;
}

a:hover {
    background-color: #333946;
    opacity: 0.5;
    border-radius: 3px;
}

</style>