0

Queria que ao passar o mouse sobre os links eles ficassem com fundo todo verde e a palavra branca, porém só fica uma parte verde e não o fundo todo. Como altero meu CSS para isso, ja tentei de diversas formas

nav#menu ul{
    list-style: none;
    text-transform: uppercase;
    position:absolute;
    top: -10px;
    left: 100px;
}

nav#menu li{	
    display:inline-block;
    background-color:#dddddd;
    padding: 10px;
    margin: 15px;
    transistion: background-color 1s;
}

nav#menu{
    display:block;	
}

nav#menu li:hover{
    background-color:#dddddd;
    padding: 10px;
}

nav#menu a {
    color:black;

}
nav#menu a:hover {
    color:white;
    background-color:green;
    text-decoration:underline;
}
<html>

<head>

<title>ENEM</title>
<link rel="stylesheet" type="text/css" href="css1.css">

</head>

<body>

    <nav id="menu">
      <ul>
        <li><a href="home.html">HOME</a></li>
        <li><a href="enem.html">ENEM</a></li>
        <li><a href="inscricoes.html">INSCRICOES</a></li>
        <li><a href="preparacao.html">PREPARACAO</a></li>
      </ul>
    </nav>
    
</body>

</html>

3 Respostas 3

1

nav#menu ul{
    list-style: none;
    text-transform: uppercase;
    position:absolute;
    top: -10px;
    left: 100px;
}

nav#menu li{	
    display:inline-block;
    background-color:#dddddd;
    padding: 10px;
    margin: 15px;
    transistion: background-color 1s;
}

nav#menu{
    display:block;	
}

nav#menu a {
    color:black;
}

nav#menu li:hover {
    background-color:#dddddd;
    padding: 10px;
    color:white;
    background-color:green;
    text-decoration:underline;
}

nav#menu li:hover  a{
    color:white;
    text-decoration:underline;
}
<html>

<head>

<title>ENEM</title>
<link rel="stylesheet" type="text/css" href="css1.css">

</head>

<body>

    <nav id="menu">
      <ul>
        <li><a href="home.html">HOME</a></li>
        <li><a href="enem.html">ENEM</a></li>
        <li><a href="inscricoes.html">INSCRICOES</a></li>
        <li><a href="preparacao.html">PREPARACAO</a></li>
      </ul>
    </nav>
    
</body>

</html>

0

Pessoalmente acho que é melhor no seu caso ter os links do menu com display:block e a ocuparem o espaço todo do item. Isso dá melhor experiencia de utilização pois a area clicável é o botão todo e não apenas o texto.

Exemplo (comentei as linhas que alterei):

nav#menu ul{
    list-style: none;
    text-transform: uppercase;
    position:absolute;
    top: -10px;
    left: 100px;
}

nav#menu li{	
    display:inline-block;
    background-color:#dddddd;
    /*padding:10px*//*retirei este daqui*/
    margin: 15px;
    transistion: background-color 1s;
}

nav#menu{
    display:block;	
}

nav#menu li:hover{
    background-color:#dddddd;
    /*padding:10px;*//*retirei este pois já está fixo na regra normal do a*/
}

nav#menu a {
    color:black;
    display:block; /*display:block adicionado*/
    padding:10px; /*padding transferido do li para o a*/
}
nav#menu a:hover {
    color:white;
    background-color:green;
    text-decoration:underline;
}
<html>

<head>

<title>ENEM</title>
<link rel="stylesheet" type="text/css" href="css1.css">

</head>

<body>

    <nav id="menu">
      <ul>
        <li><a href="home.html">HOME</a></li>
        <li><a href="enem.html">ENEM</a></li>
        <li><a href="inscricoes.html">INSCRICOES</a></li>
        <li><a href="preparacao.html">PREPARACAO</a></li>
      </ul>
    </nav>
    
</body>

</html>

Note como toda a area do link do menu é clicável.

1
  • obrigado vou marcar sua resposta como a melhor
    – user92870
    10/10/2017 às 18:45
0

É porque o elemento "a" não tem a propriedade display como block por padrão, por isso ficou apenas em uma parte verde, ele estava com o display inline, então coloquei para mudar de cor o elemento li.

nav#menu ul{
    list-style: none;
    text-transform: uppercase;
    position:absolute;
    top: -10px;
    left: 100px;
}

nav#menu li{	
    display:inline-block;
    background-color:#dddddd;
    padding: 10px;
    margin: 15px;
    transistion: background-color 1s;
}

nav#menu{
    display:block;	
}

nav#menu li:hover {
    color:white;
    background-color:green;
    text-decoration:underline;
}

nav#menu li:hover a{
    color:white;
}

nav#menu a {
    color:black;

}
nav#menu a:hover {
    color:white;
    background-color:green;
    text-decoration:underline;
}
<html>

<head>

<title>ENEM</title>
<link rel="stylesheet" type="text/css" href="css1.css">

</head>

<body>

    <nav id="menu">
      <ul>
        <li><a href="home.html">HOME</a></li>
        <li><a href="enem.html">ENEM</a></li>
        <li><a href="inscricoes.html">INSCRICOES</a></li>
        <li><a href="preparacao.html">PREPARACAO</a></li>
      </ul>
    </nav>
    
</body>

</html>

Você deve fazer log-in para responder a esta pergunta.