css jbx menu 2.71 module. Menu icons + Over PrestaShop 1.4.1

[Nikpro]

Good time all day.
I ask your help in Css /
My idea to do instead of a simple menu of icons using jbx_menu_2_7_1.
In the attached file for animation on the menu (that is, load the icon once high picture) for the action (hover)

But it turns out that’s what (Current Attachments)

using the setup

A second sample (normal) – as it should be when you hover your mouse …

Help those deal with the refinement css /
Should be when you hover the bright picture (Use the bottom picture) and the usual transparent (high value pictures)

Instead, it is 2 boxes that umenscheny as something strange.


exemple

http://www.sporttimedv.ru

prstashop 1.1.41.

/*** ESSENTIAL STYLES ***/
.sf-contener { clear: both; margin: 10px 0; height: 30px; line-height: 30px; padding-left: 7px; background: transparent url(../gfx/menu/menu.gif) no-repeat left center;
}
.sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none;
}
.sf-menu { float: left; width: 960px; line-height: 1.2; /*background: transparent url(../img/blocktopmenu.gif) repeat-x;*/
}
.sf-menu ul {
background-repeat: no-repeat; position: absolute; top: -999em; width: 10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li { background-repeat: no-repeat;
position:absolute;
height:128px;
margin-bottom:15px;
}
.sf-menu img { background-repeat: no-repeat; display:block; height:128px; width:128px; position:relative; line-height 12.1px; bottom :10;

.sf-menu img :hover {

height:128px; width:128px;
background-position:left top; }

}
.sf-menu span { position: absolute ; float:left

}

.sf-menu li:hover { visibility: inherit; /* fixes IE7 ‘sticky bug’ */
}
.sf-menu li {
float: left; position: relative; } .sf-menu a { line-height 12.1px; display: block; position: relative; } .sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0; top: 2.7em; /* match top ul list item height */ z-index: 99; } ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; } ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 10em; /* match ul width */ top: 0; } ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; } ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left: 10em; /* match ul width */ top: 0; }