HTML, CSS hover background transition

Question

I am trying to change the background color of an element when cursor is hovered over it. This transition works for changing the font size but for some reason won't work for the background color. This is my CSS code.

.ul01 a,p{
    height: 100%;
    display: inline-block;
    color: white;
    text-align: center;
    padding: 16px 18px;
    text-decoration: none;
}

.companyName{
    float: left;
}

.ul01 a{
    padding-left: 30px;
    padding-right: 30px;
    width: 90px;
    float: right;
    transition: font 1s, background-color 1s;
}

.ul01 a:hover{
    background-color: red;
    font-size: 30px;
}

Here is my HTML code:

<nav id="nav">
<ul class="ul01">
    <li><p class="companyName"> Company Name </p></li>
    <li><p class="blank"></p></li>
    <li><a href="#facebook"> Facebook </a></li>
    <li><a href="#Twitter"> Twitter </a></li>
</ul>

This is a simple navigation bar.

I just found this in the code:

li a:hover:not(.active) {
    background-color: darkgray;
}

I have deleted it and all seems to work well, thank you all for the advise next time i will look more carefully.

Answer 1

It works for me on chrome. To make sure it works in all browsers, it's better if you'd define the background-color for the non-hover state, so the browser will know for sure what color it should animate from/to when it's being hovered.

Answer 2

Take a look at this, your li should be display:block .

 .ul01 a,p{ height: 100%; display: inline-block; color: black; text-align: center; padding: 16px 18px; text-decoration: none; } li { display:block; } .ul01 a{ padding-left: 30px; padding-right: 30px; width: 90px; float: right; transition: font 1s, background-color 1s; } .ul01 a:hover{ background-color: red; font-size: 30px; } 

 <nav id="nav"> <ul class="ul01"> <li><p><a href="#facebook"> Facebook </a></p></li> <li><p><a href="#Twitter"> Twitter </a></p></li> <li><p class="companyName"> Company Name </p></li> <li><p class="blank"></p></li> <li><p><a href="#facebook"> Facebook </a></p></li> <li><p><a href="#Twitter"> Twitter </a></p></li> </ul>