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

avatar witjaksono
@witjaksono

8 Kontribusi 5 Poin

Diperbarui 2 tahun yang lalu

Tanggapan

saya coba ga error kok mas

1 Jawaban:

<div>css nya gak masalah sih, keknya dari cara bikin tag "a" nya yang salah<br>coba kek gini:<br><br></div><pre>&lt;nav&gt; &lt;!--Navigasi di headbar--&gt; &lt;div id="menu"&gt; &lt;a class="login" href="login.html"&gt;Login&lt;/a&gt; &lt;a class="service" href="#service"&gt;Service&lt;/a&gt; &lt;a class="about" href="#about"&gt;About&lt;/a&gt; &lt;a class="home" href="#home"&gt;Home&lt;/a&gt; &lt;/div&gt; &lt;/nav&gt;</pre><div><br>atau tag "a" nya di bungkus dengan "li" karena biasanya di dalam tag "ul" ada "li"<br><br></div>

avatar mahalarang
@mahalarang

5 Kontribusi 0 Poin

Dipost 2 tahun yang lalu

Login untuk ikut Jawaban