CSS transition only working on mouseout - html

Question

I am trying to make CSS-only dropdowns. I have some CSS that, when a nav item is hovered, its background color changes.
.horiz-nav {
background: linear-gradient(#EEE, #900) no-repeat fixed;
border: none;
outline: none;
}
.horiz-nav ul {
list-style: none;
}
.horiz-nav ul li {
display: inline-block;
padding: 1.2em;
clear: none;
float: left;
margin: 0 0;
background: #000;
width: 10em;
transition: all .5s ease-in;
}
.horiz-nav ul ul {
display: none;
position: absolute;
top: 73px;
height: 0;
transition: all .5s ease-in;
}
.horiz-nav ul ul li {
background: linear-gradient(#000, #F50) no-repeat fixed;
padding: 7px;
margin: 0 3px;
color: #FFF;
}
.horiz-nav ul li:hover {
background: linear-gradient(to bottom, #808080, #80108F);
}
.horiz-nav ul li:hover > ul {
display: block;
height: auto;
}
.horiz-nav ul li:hover > ul li {
display: list-item;
position: relative;
float: none;
left: -62px;
}
<nav class="horiz-nav">
<ul>
<li class="title">Example.com
</li>
<li>About
</li>
<li>Contact
</li>
<li>Programming <span class="caret"></span>
<ul>
<li>HTML</li>
<li>PHP</li>
</ul>
</li>
</ul>
</nav>
With this CSS, the background changes to the new color, but it doesn't fade, with the transition. It does, however fade back to the old color on mouseout. Why is the transition only working on mouseout? And how can I make the background fade by both mouseover and mouseout? FIDDLE

Answer 1

You can't, Gradients don't support transitions
What you can do ?
Add another element under the li with same width and height and position, this element has the gradient background, and play with his opacity when hovering the li.
li .background-holder{
position : absolute;
width : 100%;
height : 100%;
top : 0;
left : 0;
background : linear-gradient(to bottom, #808080, #80108F);
opacity : 0;
transition : all 0.5;
}
li:hover .background-holder{
opacity : 1;
}
JSFiddle : http://jsfiddle.net/qrky8yyp/1/