Blocktopmenu full width

[ujwal]

Hi all,

I am creating web store through prestashop. I have tried to create full width sub menu. But the main menu also expand when I mouse over the menu. Please see Image-1 and Image-2 for more information. 

 

Thank You.

Edited February 10, 2014 by ujwal (see edit history)

[vekia]

any chance to see it live to understand the problem?

for now i don't see what's wrong there

can you shed some more light, please?

[CartExpert.net]

Hi.

 

Seems to be a styling issue.

 

 

Regards.

Robin.

The CartExpert Team

[NemoPS]

Submenus might be mssing position:absolute

[ujwal]

Hi all. Sory for late reply. Please visit "http://www.imedicia.co/site/". I have tried to create full width menu. Sub menu is displaying correctly but when mouse over to main menu it automatically increase the width of main menu.

Edited February 10, 2014 by ujwal (see edit history)

[CartExpert.net]

Hi.

 

The link redirects to localhost.

 

Make sure you set the domain correctly.

 

Regards.

Robin.

The CartExpert Team

[ujwal]

Oh Sorry moderators. Please check I removed redirection.

 

Thank You

[CartExpert.net]

The submenu's position should be absolute.

 

Regards.

Robin.

The CartExpert Team

[ujwal]

Hi Moderator

 

I have tried to make position Absolute but it wont shows full widht menu. Here is my css code

 

/*** ESSENTIAL STYLES ***/

.sf-contener {

display: table;

border-collapse: collapse;

    border: none;

clear: both;

}

.sf-right {

  margin-right: 14px;

  float: right;

  width: 7px;

}

.sf-menu, .sf-menu * {

margin: 0;

padding: 0;

list-style: none;

}

.sf-menu {

  display: table-cell;

margin: 10px 0;

padding:0;

width:980px;/* 980 */

background: #1e7ec8;

}

.sf-menu ul {

/*position: absolute;*/

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

}

.sf-menu ul li {

display: inline-block;

 

 

}

.sf-menu li:hover {

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

}

.sf-menu li {

 

float: left; 

position: relative;

 display:inline-block;

    margin:0 -2px; 

}

.sf-menu a {

display: block; 

position: relative;

color:#fff;

text-shadow:0 1px 0 #333;

}

.sf-menu li:hover ul

{

left: 0px;

width:110 px;

}

.sf-menu li.sfHover ul {

left : 0px;

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

z-index:99;

min-width:100%;  /* this is add by Me*/

width:auto; /* this is add by Me*/

 

}

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 {

    

position:inline;

left : 0px;

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

z-index:99;

width:200px;

 top: -999em;

}

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:35px;

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:#1e7ec8;

 

}

.sf-menu li li li {

background:#1e7ec8;

 

}

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

  background: #ef840f;

}

.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: #ef840f;

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 ***/

 

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;

}

Edited February 10, 2014 by ujwal (see edit history)

[CartExpert.net]

In that case you'd have to display the submenus with Javascript, because the 'left' property will vary according to which <li> it belongs to.

 

 

Regards.

Robin.

The CartExpert Team

[ujwal]

@robin

 

Thank you for your reply. Please help me. I am new in prestashop. this is my first project. 

[ujwal]

any chance to see it live to understand the problem?

for now i don't see what's wrong there

can you shed some more light, please?

Please visit imedicia.co/site/ and view menu problem. Actually I want full width of sub menu. But main menu should remain same size. How can i. 

[NemoPS]

^{You have a css error at line 49 of superfish-modified.css, and in any case}

 

.sf-menu ul {

/*position: absolute;*/

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

}

 

Position absolute is commented out

[ujwal]

 

^{You have a css error at line 49 of superfish-modified.css, and in any case}

 

.sf-menu ul {

/*position: absolute;*/

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

}

 

Position absolute is commented out

 

Thank you for reply. But I want submenu with full width. 

Please help me..

[NemoPS]

yes but it must be position absolute anyway, change its width to your page width, set position:relative to the main ul instead on the single list item so it doesn't overflow depending on the chosen item