Css：鼠标悬停导航

Question

我在下面创建了一个css导航，如何阻止鼠标移动？

我也包含了图标

以下是我的代码

#nav { height: 25px; 
    padding: 22px 0 2px 53px;
    font-weight: bold;
    border-top: 1px #5B92B7 solid; 
    margin-bottom: 20px;
                                background: #477da9; /* Old browsers */
                                background: -moz-linear-gradient(top,  #477da9 0%, #2c6c9a 25%, #245e8e 50%, #1a5385 75%, #023667 100%); /* FF3.6+ */
                                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#477da9), color-stop(25%,#2c6c9a), color-stop(50%,#245e8e), color-stop(75%,#1a5385), color-stop(100%,#023667)); /* Chrome,Safari4+ */
                                background: -webkit-linear-gradient(top,  #477da9 0%,#2c6c9a 25%,#245e8e 50%,#1a5385 75%,#023667 100%); /* Chrome10+,Safari5.1+ */
                                background: -o-linear-gradient(top,  #477da9 0%,#2c6c9a 25%,#245e8e 50%,#1a5385 75%,#023667 100%); /* Opera 11.10+ */
                                background: -ms-linear-gradient(top,  #477da9 0%,#2c6c9a 25%,#245e8e 50%,#1a5385 75%,#023667 100%); /* IE10+ */
                                background: linear-gradient(top,  #477da9 0%,#2c6c9a 25%,#245e8e 50%,#1a5385 75%,#023667 100%); /* W3C */
                                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#477da9', endColorstr='#023667',GradientType=0 ); /* IE6-9 */ z-index: 1; 

        margin-left:0;      
          margin-top: -17px;
          font-size:12px
}

#nav li {
    list-style: none;
    display: inline;
    margin: 0px;
    padding: 0 0 26px 0;

}

#nav li a {
    font-family: Arial;
    font-style:normal;
    text-decoration: none;
    color: #789AB8;

 padding: 0 10px 2px 36px;
   background: url("../img/icon_nav_system.png") no-repeat scroll 17px -13px transparent;

}

#nav li a:hover  {

color: #fff;
font-weight: bold;
}

#nav li:hover {
    background: url("../img/icon_nav_system.png") no-repeat scroll 17px 1px transparent;
    margin: 0;
    color: #fff;
    padding: 1px;
}


.on a:link, .on a:visited,.on a:hover
{

color: #fff;    
font-weight:bold;
}

#nav li.on a {
    color: #fff;    
}
#nav li.on {

  margin: 0;
   background: url("../img/icon_nav_system.png") no-repeat scroll 17px 1px transparent;
   padding: 1px;
}

HTML

 <div class="nav-b" >
                <ul id="nav">
                    <li class="on"><a href="#" class="express"> Link 1</a></li>
                    <li><a href="#" class="link2">Link 2</a></li>
                    <li><a href="#" class="link3"> Link 3</a></li>
                </ul>
            </div>

Answer 1

从此课程中移除padding:1px; #nav li:hover继承人演示http://jsfiddle.net/kevinPHPkevin/Qe2Fm/