Muncul kotak hover transition yang tidak diinginkan pada tombol navigasi

Halo kak, saya ingin bertanya kenapa muncul kotak transition diantara tombol navigasi yang saya buat. Padahal saya tidak menginginkannya, saya hanya membuat css-nya sesuai letak tombol navigasinya saja

yang seharusnya

CSS yang saya inginkan hanya seperti itu

(ternyata ada bug seperti ini)

Namun, setelah saya teliti lagi ada kotak hover transisi kecil yang mengganggu/tidak saya inginkan seperti itu.

Berikut Source Code HTML-nya :

<nav>
            <!--Navigasi di headbar-->
            <div id="menu">
            <ul>
                <a class="login"> <a href="login.html">Login</a>
                <a class="service"> <a href="#service">Service</a>
                <a class="about"> <a href="#about">About</a>
                <a class="home"> <a href="#home">Home</a>
            </ul>
            </div>
        </nav>
        </div>

Berikut untuk CSS-nya :

header nav{
    float: right;
    margin-top: 15px;
    font-weight: bold;
}

header a{
    float: right;
    display: inline;
    padding: 4px 8px;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.500s;
    font-size: 16px;
    border: none;
    margin-top: -16px;
    margin-left: 15px;
}

header a:hover{
    color:#008000;
    background-color: #fff;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 15px;
}

Mohon bantuannya kak apa ada yang salah? Terimakasih