фон при наведении курсора на «подсветку»

Я пытаюсь создать навигационную панель, где выделяется фон, когда вы наводите на нее курсор, но когда я это делаю, текст также становится подсвеченным и больше не видимым (едва).

Вот мой текущий HTML и CSS:

<header>
    <img id="logoimg" src = "./images/home.jpg">
    <ul class="top-nav">
            <li><a href=''>Home</a></li>
        <li><a href=''>About Us</a></li>
        <li><a href=''>Products</a></li>
    </ul>
c</header>

.top-nav {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    background: #296E9A;
    border-radius: 5px;
}

.top-nav li {
    display: inline-block;
    font-size: 14px;
    padding: 0;
    margin: 0;
    width: 100px;
    background: #296E9A;
    text-align: center;
    border-radius: 5px;
}

.top-nav a {
    line-height: 200%;
    color: #FFF;
    text-decoration: none;
    display: block;
    font-weight: bold;
}

.top-nav a:hover {
    background: #000;
    border-radius: 5px;
    opacity: 0.05;
}