Ciao
vorrei creare un drop down menu compatibile con Internet Explorer (7 ma speravo anche 6).
Avevo scritto questo (come codice css)
La struttura HTML è così:
A parte che gli :hover non sono riconosciuti il mio problema riguarda la visualizzazione del semplice menu... (che in internet explorer 7 viene un link vicino all'altro...)
Pensavo di risolvere il problema del :hover con uno script javascript che cambia le classi css....
Un "bravo" a chi riesce a capire come rendere compatibile il menu...
ciao
vorrei creare un drop down menu compatibile con Internet Explorer (7 ma speravo anche 6).
Avevo scritto questo (come codice css)
HTML:
#menu {
width:700px;
height:70px;
float:right;
}
#menu ul {
width:700px;
list-style:none;
margin-top:0px;
margin-bottom:0px;
margin-right:20px;
float:right;
}
#menu li {
width:102px;
display:inline-block;
display: -moz-inline-box;
height:70px;
vertical-align:middle;
}
* html #menu li { display:inline; } /* hack per IE 6 */
* + html #menu li { display:inline; } /* hack per IE 7 */
#menu a {
width:102px;
height:70px;
display:table-cell;
text-decoration:none;
text-align:center;
vertical-align:middle;
font-weight:600;
}
#menu li:hover ul {
display:block;
}
#menu li>ul {
width:150px;
display:none;
position:absolute;
margin:0px;
padding:0px;
border-style:solid;
border-width:2px;
border-color:#EBEBEB;
border-radius:5px;
}
#menu li>ul li {
width:150px;
display:block;
}
#menu li>ul>li a {
width:150px;
}
#menu li>ul>li ul {
margin-left:150px;
visibility:hidden;
margin-top:-72px;
border-style:solid;
border-width:2px;
border-color:#EBEBEB;
border-radius:5px;
}
#menu li>ul li:hover ul {
visibility:visible;
}
La struttura HTML è così:
HTML:
<div id="menu">
<ul>
<li>
<a href="www.google.it">Home</a>
<ul>
<li>
<a href="www.google.it">Home Sotto 1</a>
<ul>
<li><a href="www.google.it">Home Sotto Sotto 1</a></li>
<li><a href="www.google.it">Home Sotto Sotto 2</a></li>
<li><a href="www.google.it">Home Sotto Sotto 3</a></li>
<li><a href="www.google.it">Home Sotto Sotto 4</a></li>
<li><a href="www.google.it">Home Sotto Sotto 5</a></li>
</ul>
</li>
<li><a href="www.google.it">Home Sotto 2</a></li>
</ul>
</li>
<li>
<a href="www.google.it">Contatti</a>
<ul>
<li>
<a href="www.google.it">Contatti Sotto 1</a>
<ul>
<li><a href="www.google.it">Contatti Sotto Sotto 1</a></li>
<li><a href="www.google.it">Contatti Sotto Sotto 2</a></li>
<li><a href="www.google.it">Contatti Sotto Sotto 3</a></li>
</ul>
</li>
<li><a href="www.google.it">Contatti Sotto 2</a></li>
<li><a href="www.google.it">Contatti Sotto 3</a></li>
</ul>
</li>
<li><a href="www.google.it">Prodotti</a></li>
<li><a href="www.google.it">Dove siamo</a></li>
<li><a href="www.google.it">Contatti</a></li>
<li><a href="www.google.it">Contatti</a></li>
</ul>
</div>
A parte che gli :hover non sono riconosciuti il mio problema riguarda la visualizzazione del semplice menu... (che in internet explorer 7 viene un link vicino all'altro...)
Pensavo di risolvere il problema del :hover con uno script javascript che cambia le classi css....
Un "bravo" a chi riesce a capire come rendere compatibile il menu...
ciao
Ultima modifica: