block top menù bug internet explorer

[tommyx_x]

Ciao a tutti, cercando sul sito e con San google non sono riuscito a trovare una risposta al mio problema, quindi creo un thread nella speranza che qualcuno abbia una soluzione.

Ho installato un menù orizzontale alla quale ho modificato 4 sciocchezze, solo che con internet explorer si sovrappongono le voci delle sottocategorie, invece con firefox e chrome dà l'effetto desiderato.

Posto il codice sperando che qualcuno mi sappia dire cosa cambiare.

 

/*** ESSENTIAL STYLES ***/
.sf-contener {
 width:853px;
 float:left;
 clear:both
}
.sf-right { display:none}
.sf-menu, .sf-menu * {
margin:   0;
padding:  0;
list-style:  none;
}
.sf-menu {
background: url("../img/men.png") no-repeat scroll left bottom transparent;
border-top: 0 dotted #EFEFEF;
float: left;
height: 120px;
line-height: 1.2;
margin-bottom: 0.8em;
margin-left: -0px;
margin-top: -11px;
padding: 0 1em;
width: 984px;
}
.sf-menu ul {
position:  absolute;
top:   -999em;
width:   15em; /* 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;
}
.sf-menu a {
display:  block;
position:  relative;
color:		 #282c2f;
text-transform:capitalize;
}
.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;
}
/*** DEMO SKIN ***/
.sf-menu {
float: left;
margin-top: 6px;
}
.sf-menu a {
 border: 0;
/* border-left: 1px solid #fff;
border-top:  1px solid #CFDEFF; */
padding:	13px 25px 9px 0;
text-decoration:none;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
color: #202020;
font-size: 9px;
font-weight: bold;
text-decoration: none;
}
.sf-menu a:active  { /* visited pseudo selector so IE6 applies text colour*/
color:   #da0f00;
}
.sf-menu li li {
background:  white;/*#AABDE6;*/
}
.sf-menu li li li {
background:  white;/*#9AAEDB;*/
}
.sf-menu a:hover, .sf-menu a:active { text-decoration:none}
.sf-menu a:active { text-decoration:none; color:#202020}
.sf-menu li.noBack {
background:none repeat scroll 0 0 transparent;
}
.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:white url('../img/texture.gif');
outline:  0;
}
/*** arrows **/
.sf-menu a.sf-with-ul {
padding-right:  3em;
min-width:  1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
background:url("../img/arrows-ffffff.png") no-repeat scroll -10px -100px transparent;
display:block;
height:10px;
margin-top:6px; /* IE6 only */
overflow:hidden;
position:absolute;
right:1.6em;
text-indent:-999em;
width:10px;
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
top:   .8em;
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/texture.gif');
padding: 0 3px 3px 0;
}
.sf-shadow ul a { padding:.75em 1em;}
.sf-shadow ul a:hover{ text-decoration:none}
.sf-shadow ul.sf-shadow-off {
background: white;
}
li.sf-search {
 background: inherit;
 float: right;
 line-height: 20px;
}
li.sf-search input {
background: url("../img/block-search.gif") no-repeat scroll left center transparent;
border: medium none;
color: #000000;
height: 38px;
margin-top: 0;
padding: 12px 3px 3px 20px;
width: 178px;
}

 

help me please.

Antonio

Edited June 28, 2012 by tommyx_x (see edit history)

[ciroco05]

Ciao,

 

prova inserendo nella classe .sf-contener (prime righe) questa riga

z-index: 999;

e modifica nella classe .sf-menu li.sfHover ul

da cosi:

z-index: 99;

a cosi

z-index: 9999999;

 

Ciroco05

[pulverize]

Ti ringrazio, provo immediatamente...

gentilissimo..

[pulverize]

oops, ho aperto il thread con l'account di mio fratello Tommyx_x, sono esaurito.

Cmq, stanotte ho apportato la modifica, ma su IE non è cambiato nulla, ho cancellato la cache, ecc, ecc.

Altre idee?

In ogni caso grazie mille....

Edited June 29, 2012 by pulverize (see edit history)

[polparo]

Ciao

Spero tu abbia già risolto visto il tempo che è passato.

Cmq se tu non avessi risolto ti dico come ho fatto io:

 

Nel file SUPERFISH-MODIFIED.CSS nella prima riga devi modificare così:

 

 

.sf-contener {

position:relative;

z-index:2;

clear: both

}

 

 

Vedrai che tutto si risolve anche su IE (lo z-index vuole il position RELATIVE e non absolute....)

ciao

[checco]

Ciao, ho provato il tuo css in locale e non da particolari problemi.

Se posti un link del sito magari riusciamo a capire meglio.

 

Ciao