Drop Down Menu compatibile con internet explorer

  • Creatore Discussione Creatore Discussione Fxxxx
  • Data di inizio Data di inizio

Fxxxx

Utente Attivo
17 Set 2011
63
0
0
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:

Discussioni simili