Different hover effects [html/css]

I have a menu with a hover effect on all listed links/ items. I want to put a Home icon (the house), whose hover effect to be switching between 2 identical images with different color, OK I got this, but the main hover effect still applies to it as background.

For example, when I move the mouse over any of the links the hover effect is orange background around the text, and I want to remove that effect from the Home icon only( there's already switching between white house and orange house on mouse over).

I've tried so many things and still nothing successful...

Thank you in advance!

Picture of what I'm talking about

HTML code:

<div class="Menu">

<div class="ner">
<ul>

        <li class="home">
             <a  href="#" ><img onmouseout="this.src='home1.png'" onmouseover="this.src='home2.png'" src="home1.png" width=25px; height=25px;></a></li>


            <li><a href="#">Item1</a></li>
            <li class="drop">
                <a href="#">Item2</a>

                <div class="dropdownContain">
                    <div class="dropOut">
                        <div class="triangle"></div>
                        <ul>
                            <li>Blog 1</li>
                            <li>Blog 2</li>
                            <li>Blog 3</li>
                            <li>Blog Blog 4</li>
                        </ul>
                    </div>
                </div>

            </li>
            <li><a href="#">Item3</a></li>


<li class="drop">
                <a href="#">Item4</a>

                <div class="dropdownContain">
                    <div class="dropOut">
                        <div class="triangle"></div>
                        <ul>
                            <li>Blog 1</li>
                            <li>Blog 2</li>
                            <li>Blog Blog 3</li>
                            <li>Blog Blog 4</li>
                        </ul>
                    </div>
                </div>

            </li>
<li><a href="#">Item5</a></li>
<li><a href="#">Item6</a></li>


</ul>
</div>
</div>

CSS code:

.Menu {
    background: #44474B;
    display: block;
    position: fixed;
    width:900px;
    right: 0;
    top: 0;
    height: 55px;
    min-width: 100%;
    z-index: 9999;
}

.Menu ul{ float:left;}

.Menu li{position:relative; z-index:10; float:left; list-style:none; margin:0 15px; }

.Menu a{ padding:11px 18px; color:#373737; list-style:none; color:#FFF; text-decoration:none; 
        -webkit-transition: all .3s linear 0s;
    -moz-transition: all .3s linear 0s;
    -ms-transition: all .3s linear 0s;
    -o-transition: all .3s linear 0s;
    transition: all .3s linear 0s;}

.Menu ul li a:hover{ border-radius:6px;
background: #ffa84c; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(top,  #ffa84c 0%, #ff7b0d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa84c), color-stop(100%,#ff7b0d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffa84c 0%,#ff7b0d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffa84c 0%,#ff7b0d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffa84c 0%,#ff7b0d 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffa84c 0%,#ff7b0d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=0 ); /* IE6-8 */

}

.Menu .home a:hover {
background-color: green; !important
text-decoration:none; !important
}

.ner{width:900px; margin:0 auto; padding-top:0; padding-left:0;}

The green background color is for testing purposes only.