Problema de iniciante! rs

[luna007 0]

ola,

sou novo na área.

estou com problema de colocar sublinhado no hover e no active, alguém poderia me ajudar?

tentei até fazer como se fosse uma imagem, mas n aparece, nem ando faço o sublinhado como imagem.

grato.

 

@charset "UTF-8";

/* CSS Document */

*{

padding:0;

margin:0;

}

#header{

background:url(../images/header_bg.jpg);

height:826px;

}

#logo{

margin-top:35px;

margin-left:120px;

width:395px;

height:64px;

background:url(../images/logo.jpg);

float:left;

}

#menu{

clear:both;

margin-right:80px;

float:right;

font-size:19px;

}

#menu li{

display:block;

float:right;

margin-top:100px;

margin-right:30px;

color:white;

font-family:"Walkway SemiBold";

text-align:center;

}

#menu li a{

display:block;

text-decoration:none;

}

#menu li a:hover{

display:block;

text-decoration:underline;

}

#menu li a:active{

display:block;

text-decoration:underline;

}

[guilomaker 31]

se for sublinhado no link, você tem que remover o text-decoration:none do #menu li a

[Claudio Junior 18 3]

se for sublinhado no link, você tem que remover o text-decoration:none do #menu li a

 

Mas o que ele quer fazer é mostrar o sublinhado só quando para em cima do link. Era para estar funcionando do jeito que ele fez.

 

Você está usando algum CSS externo? Isso é toda a informação de estilos que você tem? Experimente só para fins de teste assim e veja se funciona:

#menu li a:hover {
text-decoration: underline !important;
}

Se funcionar é porque tem alguma regra de estilos sobrescrevendo esta.

[guilomaker 31]

 

Mas o que ele quer fazer é mostrar o sublinhado só quando para em cima do link. Era para estar funcionando do jeito que ele fez.

 

Você está usando algum CSS externo? Isso é toda a informação de estilos que você tem? Experimente só para fins de teste assim e veja se funciona:

#menu li a:hover {
text-decoration: underline !important;
}

Se funcionar é porque tem alguma regra de estilos sobrescrevendo esta.

 

vacilo meu! entendi outra coisa, mais ai no caso ta certinho mesmo, deve ser alguma parte do seu código que esta atrapalhando.

[Emet 6]

Funciona: http://codepen.io/anon/pen/bdNVME

[L. Henrique 179]

É realmente necessário você utilizar ID's ao invés de classes? Bom, não sei o que você vai direcionar ai, mas fica a seu critério.

¹Acesse o JSFiddle que contém duas possíveis soluções.

²Caso não consiga ou não queira acessá-lo, segue o código abaixo:
HTML:

<!-- Com text-decoration: underline -->
<div class="logo">
    <span>Maneira: Underline</span>
</div>

<nav>
    <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
    </ul>
</nav>

<!-- Com border-bottom + Transition -->
<div class="logo">
    <span>Maneira: Border-Bottom</span>
</div>

<nav class="navbar">
    <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
    </ul>
</nav>

CSS:

html,body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.logo{
    width: 100%;
    height: 70px;
    background: #000000;
    margin: 0;
}
    .logo span{
        line-height: 70px;
        margin-left: 10px;
        text-transform: uppercase;
        font-family: arial;
        font-weight: 700;
        color: #E91E63;
    }

//Com text-decoration
nav{
    background: #ECF0F1;
    width: 100%;
    height: 50px;
}

    nav ul{
        display: inline-block;
    }

        nav ul li{
            display: inline-block;
            font-family: arial;
            text-transform: uppercase;
        }

            nav ul li a{
                text-decoration: none;
                padding: 16px 8px 17px 8px;
                -webkit-transition: all 0.2s ease;
                -moz-transition: all 0.2s ease;
                transition: all 0.2s ease;
                color: #000;
            }

                nav ul li a:hover{
                    color: #E91E63;
                    text-decoration: underline;
                }

//Com border-bottom.
.navbar{
    background: #ECF0F1;
    width: 100%;
    height: 50px;
}

    .navbar ul{
        display: inline-block;
    }

        .navbar ul li{
            display: inline-block;
            font-family: arial;
            text-transform: uppercase;
        }

            .navbar ul li a{
                position: relative;
                text-decoration: none!important;
                color: #000;
                -webkit-transition: all 0.2s ease;
                -moz-transition: all 0.2s ease;
                transition: all 0.2s ease;
            }

                .navbar ul li a:hover{
                    color: #E91E63;
                }
                
                .navbar ul li a:before{
                      content: "";
                      position: absolute;
                      width: 100%;
                      height: 1px;
                      bottom: 0;
                      left: 0;
                      background-color: #E91E63;
                      visibility: hidden;
                      -webkit-transform: scaleX(0);
                      transform: scaleX(0);
                      -webkit-transition: all 0.2s ease-in-out 0s;
                      transition: all 0.2s ease-in-out 0s;
                }

                    .navbar ul li a:hover:before{
                        visibility: visible;
                        -webkit-transform: scaleX(1);
                        transform: scaleX(1);
                    }

Seria interessante dar uma olhada no JSFiddle, já que foram usados dois métodos pra criar a underline. Uma foi o próprio text-decoration: underline, já o outro foi o uso de hover + before + transition pra dar um efeito um pouquinho melhor.