Change when mouseover CSS

Navigation
0

I wanted to move the mouse over the links, they would have a green background and a white word, but only one green part and not the whole background. How do I change my CSS for this, already tried in several ways 

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>
    
asked by anonymous 10.10.2017 / 19:43

3 answers

0

Personally I think it is better in your case to have the menu links with display:block and occupy the entire space of the item. This gives better user experience because the clickable area is the whole button and not just the text.

Example (I commented the lines that I changed): 

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>

Notice how the entire menu link area is clickable.

    
10.10.2017 / 20:33
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>
    
10.10.2017 / 19:46
0

It is because the element "a" does not have the display property as a block by default, so it was only in a green part, it was with the inline display, so I put the li element to change color. 

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>
    
10.10.2017 / 19:46
App database does not delete Instantiate a class that inherits an interface class [closed]