Css Меню иконками prestashop 1.4.1

[Nikpro]

Доброе время суток.

Я прошу вашей помощи в CSS /

Моя идея сделать вместо простого меню иконки .

В прикрепленном файле лежит результат то что получилось ))

 

Должно быть при наведении мышкой сменяться картинка(то есть действие over)

Вместо этого, 2 коробки, что как-то странно. должна быть одна

 

Помогите разобраться с CSS /

 

Например

 

 

 

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; }

 

Edited May 5, 2013 by NIKS (see edit history)

[yohanson]

Навскидку.

1) на время создания везде сделать margin padding = 0

2) img
убрать height, width и bottom;
обернуть в div;
этому div{ overflow: hidden; height: 128px;}

3) .sf-menu img :hover
между img и hover пробел не нужен
поэтому пишем
.sf-menu img:hover {
margin-top:-128px;
}

[Nikpro]

На ucoz делал давно правда http://rc-vl.ucoz.ru/ но принцип должен быть такой же

Я уже думал об это , дело в том что Я делаю на базе меню это ( то ест картинки и ссылки через админку назначаешь )

[Nikpro]

Разобрался кому нужно креплю меню--

Буду признателен если кто нибудь доработает - чтобы корректно отображалось выпадающее меню =)

jbx_menu.zip

[gabdr]

скачай advanced top menu и не парься