How to remove the blue lines in my menu in css?

Question

I've made a menu in my Website and I've been trying to remove those blue lines (which usually appear by default) from there. I've tried adding text-decoration:none; in all the options relevant to it but, that doesn't seem to be working. What should I do?

.menu {
    list-style: none;
    font-family: sans-serif;
    position: absolute;
    top: 10px;
    right: 30px;
    z-index: 15;
    cursor: pointer;
    align-self: center;
    text-decoration: none;
    color: darkblue;

}

.links {
    float: left;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 10px;
    padding-left: 10px;
    font-family: monospace;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
}

V.links:hover {
    background-color: hotpink;
    text-decoration: none;

}

<section id=first>
    <center>
        <ul class="menu">
            <li class="links"> <a href="#first"> Introduction </a> </li>
            <li class="links"> <a href="#second"> About </a> </li>
            <li class="links"> <a href="#third"> Defenition</a> </li>
            <li class="links"> <a href="#fourth"> My Works </a> </li>
            <li class="links"> <a href="#fifth"> Inspiration </a> </li>
            <li class="links"> <a href="#sixth"> Contact </a> </li>
        </ul>
    </center>
</section>

We can't troubleshoot images of code. Edit your question to include a [mvce] please — j08691, Aug 13 '21 at 15:22

Nitheesh · Answer 1 · 2021-08-13T15:47:24.023

The blue underline is because of text-decoration: underline; added to an anchor tag by default. To remove that use text-decoration: none for .link a

.menu {
    list-style: none;
    font-family: sans-serif;
    position: absolute;
    top: 10px;
    right: 30px;
    z-index: 15;
    cursor: pointer;
    align-self: center;
    text-decoration: none;
    color: darkblue;

}

.links {
    float: left;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 10px;
    padding-left: 10px;
    font-family: monospace;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
}

.links a {
    text-decoration: none;
}

V.links:hover {
    background-color: hotpink;
    text-decoration: none;

}

<section id=first>
    <center>
        <ul class="menu">
            <li class="links"> <a href="#first"> Introduction </a> </li>
            <li class="links"> <a href="#second"> About </a> </li>
            <li class="links"> <a href="#third"> Defenition</a> </li>
            <li class="links"> <a href="#fourth"> My Works </a> </li>
            <li class="links"> <a href="#fifth"> Inspiration </a> </li>
            <li class="links"> <a href="#sixth"> Contact </a> </li>
        </ul>
    </center>
</section>

score 0 · Answer 2 · answered Aug 13 '21 at 15:30

li{
list-style-type: none; 
}
a{
text-decoration: none;
}

next time put your code here not picture and if you only searching on google you will get answer this qustion is have answer
<br/>
<br/>
<br/>
<a href="https://stackoverflow.com/questions/16286921/how-do-i-remove-a-specific-bullet-point-within-a-ul-in-css">Clicl Here to see your qustion about point </a>
<br/>
<br/>
<br/>
<br/>
<a href="https://stackoverflow.com/questions/12528316/removing-underline-with-href-attribute">click here to see your qustion about line under text</a>
<br/>
<br/>
<br/>
<li>example one</li>
<br/>
<br/>
<br/>
<a href="yourUrl">example two</a>

How to remove the blue lines in my menu in css?

2 Answers2