Top menu : from horizontal to vertical, some bugs to correct in 1.6

[lekidou]

Hi everybody,

 

First, sorry if my English is not perfect...

 

I have modified my top menu on my Prestashop shop under construction.

I have modifies the horizontal top menu to put a vertical menu.

I have modified my superfish-modified.css like seen on another topic.

 

Here is my top menu modified :

 

 

There are 5 things I would like to correct to have a perfect top menu but I don't know how to do this

- the widht of this menu. I would like to make this tha same height that the menu "News" and "Promotions".

- if I modify this widht, the sub menu is not at the good height, it will come ON the top menu (like you can see above, the blue comes on the red)

- the sub menu is too short, some words comes outside the blue color, like "accessoires cheveux", I would like that this submenu adapts automatically the words used

- the sub menu is not perfectly aligned under the top menu (specially under "soins cheveux")

- I would like to remove the gray pop up "accessoires beauté" that appears when we are on the top menu with the mouse

 

 

Thank you very vey much for everybody that can help me !

 

 

Here is my superfish-modified.css complete

 

/*** ESSENTIAL STYLES ***/

.sf-contener {

clear: both;

}

.sf-right {

margin-right: 14px;

float: right;

width: 7px;

}

.sf-menu, .sf-menu * {

margin: 0;

padding: 0;

list-style: none;

}

.sf-menu {

margin: 10px 0;

padding: 1px;

width:100%;

text-transform: uppercase;

font: 600 18px/24px "Open Sans", sans-serif;

background: #00255E;

}

.sf-menu ul {

position: absolute;

top: -999em;

width: 10em; /* left offset of submenus need to match (see below) */

}

.sf-menu ul li {

width: 100%;

}

.sf-menu li:hover {

visibility: inherit; /* fixes IE7 'sticky bug' */

}

.sf-menu li {

float: left;

position: relative;

border-right: 1px solid #001A42;

}

.sf-menu a {

display: block;

position: relative;

color:#fff;

border-bottom: 1px solid #00173B;

}

.sf-menu li:hover ul,

.sf-menu li.sfHover ul {

left: 0;

top: 34px; /* match top ul list item height */

z-index: 99;

width:auto

}

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: 200px; /* 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: 200px; /* match ul width */

top: 0;

}

 

/*** DEMO SKIN ***/

.sf-menu {

float: left;

margin-bottom: 1em;

}

.sf-menu a {

display:block;

margin-right:2px;

padding: 0 22px 0 20px;

line-height:44px;

border: 0;

text-decoration:none;

}

.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/

color: #fff;

white-space:nowrap;

}

.sf-menu li li {

background: rgba(0, 37, 94, 0.9);

}

.sf-menu li li li {

background: rgba(0, 37, 94, 0.9);

}

.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {

background: #BB133E;

}

.sf-menu ul li:hover, .sf-menu ul li.sfHover,

.sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {

background: #BB133E;

outline: 0;

}

/*** arrows **/

.sf-menu a.sf-with-ul {

padding-right: 2.25em;

min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */

}

.sf-sub-indicator {

position: absolute;

display: block;

right: 10px;

top: 1.05em; /* IE6 only */

width: 10px;

height: 10px;

text-indent: -999em;

overflow: hidden;

background: url('../img/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */

}

a > .sf-sub-indicator { /* give all except IE6 the correct values */

top: 11px;

background-position: 0 -100px; /* use translucent arrow for modern browsers*/

}

/* apply hovers to modern browsers */

a:focus > .sf-sub-indicator,

a:hover > .sf-sub-indicator,

a:active > .sf-sub-indicator,

li:hover > a > .sf-sub-indicator,

li.sfHover > a > .sf-sub-indicator {

background-position: -10px -100px; /* arrow hovers for modern browsers*/

}

 

/* point right for anchors in subs */

.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }

.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }

/* apply hovers to modern browsers */

.sf-menu ul a:focus > .sf-sub-indicator,

.sf-menu ul a:hover > .sf-sub-indicator,

.sf-menu ul a:active > .sf-sub-indicator,

.sf-menu ul li:hover > a > .sf-sub-indicator,

.sf-menu ul li.sfHover > a > .sf-sub-indicator {

background-position: -10px 0; /* arrow hovers for modern browsers*/

}

 

/*** shadows for all but IE6 ***/

.sf-shadow ul {

background: url('../img/shadow.png') no-repeat bottom right;

padding: 0 8px 9px 0;

-moz-border-bottom-left-radius: 17px;

-moz-border-top-right-radius: 17px;

-webkit-border-top-right-radius: 17px;

-webkit-border-bottom-left-radius: 17px;

}

.sf-shadow ul.sf-shadow-off {

background: transparent;

}

li.sf-search {

background: inherit;

float: right;

line-height: 25px;

}

li.sf-search input {

-moz-border-radius: 0 5px 5px 0;

padding: 3px 0;

padding-left: 20px;

margin: 6px 6px 0 0;

background: #fff url('../img/search.gif') no-repeat left center;

border:1px solid #777

}

 

/* hack IE7 */

.sf-menu a, .sf-menu a:visited {height:34px !IE;}

.sf-menu li li {

width:200px;

background:#726f72 !IE;

}

 

 

#block_top_menu .category-thumbnail {

clear: both;

width: 100%;

float: none; }

#block_top_menu .category-thumbnail div {

float: left;

width: 33.33333%; }

#block_top_menu .category-thumbnail div img {

max-width: 100%; }

#block_top_menu li.category-thumbnail {

padding-right: 0; }

[lekidou]

Anyone could help me please ?