How to add background to an inline list ? And how to remove the default underline effect?

Asked

Viewed 33 times

0

I’d like to add a background to that menu, how can I do that?

The background-color only adds color to the words and not to the whole. And it also has this effect underline in the list <nav> that I would like to remove.

inserir a descrição da imagem aqui

HTML CODE:

<!DOCTYPE>
<html>
    <head>
    <link rel="stylesheet" href="_css/estilo.css">
    <meta charset="UTF-8">
    <title>Aprendendohtml</title>

    </head>
    <body>
        <header>
        <!--<img src="_img/logo.png" alt="Programador" id="logo">-->
        <nav id="menu">
        <p id="letreiro">MarceloSantos.com</p>
            <ul>
                <li><a  href="#inicio">ÍNICIO</a></li>
                <li><a  href="#portfolio">PORTFÓLIO</a></li>
                <li><a  href="#redes-sociais">REDES SOCIAIS</a></li>
                <li><a  href="#contato">CONTATO</a></li>
            </ul>
        </nav>

        </header>

        <footer>

        </footer>
    </body>
</html>

CSS code:

body {

}
#letreiro {
    font-size: 50px;
    font-family: Impact, Charcoal, sans-serif;
    text-align: center;
    background-color: #2F4F4F;
    color: #BEBEBE;
    padding: 20px;

}
#menu ul li {
    display: inline;
    margin-left: 100;
    margin-right: 100;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    color: #696969;
}
html css html5

2 answers

0


Menu is a id that references an object in the document so you need to use the Sharp "#" in front of the marking: 

#menu ul li {propriedades}

If the reference were for a class the point comes forward:

.classe{propriedades}

0

to remove the underline from a text just in your css use:

 #letreiro li a {
 text-decoration: none;
 }

I hope I helped =D.

Browser other questions tagged html css html5

You are not signed in. Login or sign up in order to post.