Nav is showing the text decoration in blue

HTML-CSS
1

As you can see at my nav when I put my mouse over the links it appears the blue underline but I said in CSS to not show and also wanted to remove the white one from the last button.

My header

    <header class="container">
        <section class="row">
            <p id="company-logo">&nbsp&nbspEGI<br>GOLD</p>

            <!-- Menu de navegação do website-->
            <nav>
                <ul>
                    <a href="#"><li>INÍCIO</li></a>
                    <a href="#"><li>SOBRE</li></a>
                    <a href="#"><li>FAQ</li></a>
                    <a href="tel:966835888" class="btn btn-orange"><li>LIGAR</li></a>
                </ul>
            </nav>
            <!-- Final do Menu de navegação do website-->
        </section>

    </header>

and my css header file

header section{
    justify-content: space-between;
    align-items: center;
}
header section nav ul{
    display: flex;
    flex-direction: row;
    align-items: center;
}
header section nav ul a li{
    color: #fff;
    margin: 0 15px;
    font-size: 15pt;
    text-decoration: none;
    position: relative;
}
#company-logo{
    color: #fff;
    font-size: 30px;
    font-weight: bold;
}
header nav ul a li:hover{
    text-decoration: none;
}
header nav ul a li::after{
    content: " ";
    width: 0%;
    height: 3px;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    transition: .50s;
}
header nav ul a li:hover::after{
    width: 100%;
}
header nav ul a .btn.btn-orange::after {
    width: 0%;
}
2

Hey @arthurrennan
I think the links need to be inside your li elements

<li><a >text</a></li>

Then on your css use the a tag to set the text decoratio to none

a{
}

You need also to use the a tag on the hover state

ul li a:hover{
}

Hope it helps

3

Hello, thanks for the information, I tried exactly that but still with the problem.
So weird because I did this many times

4

The a element is not a valid ul child element anyway. If you fix the HTML you need to correct all the selectors as well.

It should be “list” → “listItem” → “link” in both the HTML and CSS.

The code you posted does not show the same as the video. It always has the text-decoration. If you need help post your updated code and post all of it.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.