css - .less を使用したグラデーションとトランジションを使用した div 背景

Question

グラデーション付きの div があり、ユーザーがそれを超えたときにトランジションを適用したいのですが、トランジションを作成しましたが、グラデーションでは機能しません。これは、styles.less を使用した私の CSS コードです。

#navigation li
{
    margin: 0;
    width:126px;
    height:40px;
    padding-left:0px;
    padding-right:0px;
    list-style:none;
    float:left;

    /* Mozilla: */
    background: -moz-linear-gradient(top, #c9c9c9, #7b7b7b);
    /* Chrome, Safari:*/
    background: -webkit-gradient(linear,
                left top, left bottom, from(#c9c9c9), to(#7b7b7b));
    /* MSIE */
    filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#c9c9c9', EndColorStr='#7b7b7b', GradientType=0);
    .transition_bg;
}

#navigation li:hover{

    background: -moz-linear-gradient(top, #696969, #404040);
    /* Chrome, Safari:*/
    background: -webkit-gradient(linear,
                left top, left bottom, from(#696969), to(#404040));
    /* MSIE */
    filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#696969', EndColorStr='#404040', GradientType=0);
}

.transition_bg{
    transition-property: background; /*standard*/
    transition-duration: 0.4s;

    -webkit-transition-property: background; /*Safari e Chrome */
    -webkit-transition-duration: 0.4s;

    -o-transition-property: background;      /*Opera*/
    -o-transition-duration: 0.4s;

    -moz-transition-property: background;    /*Firefox*/
    -moz-transition-duration: 0.4s; 
}

そして、これは私のhtmlです

<div id="navigation">
            <ul>
                <li><a href="index.php" id="index_btn">HOME</a></li>
                <li><a href="#" id="">AZIENDA</a></li>
                <li><a href="#" id="">PRODOTTI</a></li>
                <li><a href="#" id="">PARTNER</a></li>
                <li><a href="#" id="">NEWS</a></li>
                <li><a href="#" id="">CONTATTI</a></li>
            </ul>
        </div>