Menü mavi-yeşil

.menu{margin:0; padding:0; width:250px; list-style:none;background:rgb(255,255,255);}
.menu li{padding:0; margin:0 0 1px 0; height:40px; display:block; }
.menu li a{text-align:left;height:40px; padding:0px 25px; font:16px Verdana, Arial, Helvetica, sans-serif; color:rgb(255,255,255); display:block; background:url('verMenuImages.png') 0px 0px no-repeat; text-decoration:none;}
.menu li a:hover{background:url('verMenuImages.png') 0px -40px no-repeat; color:rgb(255,255,255);}
.menu li a.active, .menu li a.active:hover{background:url('verMenuImages.png') 0px -80px no-repeat; color:rgb(255,255,255);}
.menu li a span{line-height:40px;}

<ul class="menu">
  <li><a href="/home" class="active"><span>Home</span></a></li>
  <li><a href="/services"><span>Services</span></a></li>
  <li><a href="/about"><span>About</span></a></li>
  <li><a href="/contact"><span>Contact</span></a></li>
</ul>

<style type="text/css">
.menu{margin:0; padding:0; width:250px; list-style:none;background:rgb(255,255,255);}
.menu li{padding:0; margin:0 0 1px 0; height:40px; display:block; }
.menu li a{text-align:left;height:40px; padding:0px 25px; font:16px Verdana, Arial, Helvetica, sans-serif; color:rgb(255,255,255); display:block; background:url('verMenuImages.png') 0px 0px no-repeat; text-decoration:none;}
.menu li a:hover{background:url('verMenuImages.png') 0px -40px no-repeat; color:rgb(255,255,255);}
.menu li a.active, .menu li a.active:hover{background:url('verMenuImages.png') 0px -80px no-repeat; color:rgb(255,255,255);}
.menu li a span{line-height:40px;}
</style>