Menu html e css colorido

Menu html e css colorido

como colocar cor no menu html?

Neste tutorial veja como podemos criar um menu html e css colorido.

Nesta seção, projetaremos uma estrutura simples na tag  <nav>,  <ul>, <li>, e a <a> para inserir o link de destino. 

Usaremos as classes (.menu, .list, e a class .item) para dar o formato e estilizar com css.

Essas é a tags e classes que usaremos para criar o nosso menu html Css colorido.

Vamos Adicionar o HTML

                <nav class="menu">

                  <ul class="list">
                    <li class="item"><a href="#" title="Home">Home</a></li>
                    <li class="item"><a href="#" title="Sucos">Sucos</a></li>
                    <li class="item"><a href="#" title="Lanches">Lanches</a></li>
                    <li class="item"><a href="#" title="Salgados">Salgados</a></li>
                    <li class="item"><a href="#" title="Chocolates">Chocolates</a></li>
                  </ul>

                </nav>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar o  nosso Menu colorido com html e css.

.menu{

    width: 100%;
    height: auto;
    float: left;

}


.list{

    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: grid;
    text-align: center;
    width: 100%;
    height: 100%;

}

.item{

    display: block;
    text-align: center;
    transition: 0.4s ease-out;
    cursor: pointer;
    height: 50px;
    float: left;
    line-height: 55px;
    margin-bottom: 1px;
    border-radius: 6px;

}

.item>a{

    width:100%;
    height:auto;
    display:inline-block;
    font-size:1em;
    color:#000;
    text-decoration:none;
    font-weight:bold;
    position:relative;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;

}


.item:nth-child(1){
    background-color:#06D8D8;
}

.item:nth-child(2){
    background-color:#69B646;
}

.item:nth-child(3){
    background-color:#E33939;
}

.item:nth-child(4){
    background-color:#FF9143;
}

.item:nth-child(5){
    background-color:#AC777F;
}

.item:hover{
    background-color:#e0e0e0;
}

/*768PX BREAKPOINT*/
@media (min-width:48em){

    .list { display: block; }
    .item { border-radius: 0; width: 20%; }

} 

Combinando as Duas seções acima Html e Css temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando