Mam pewien problem z menu na stronie. Menu jest przygotowane w stylach css, i na innych przeglądarkach wszystko śmiga idealnie. Na Explorerze 9 również. Jednak na wersjach starszych niż 9, gdy rozwijam menu i jadę myszką niżej, nagle ot tak z niczego menu się zamyka. O co chodzi? Muszę wstawić jakiś specjalny dodatek dla starszych wersji Explorera, czy jak? Spotkał się ktoś z czymś takim?
Napisałem pewien kod w pewnej wersji CSS, który działa na pewnych przeglądarkach, ale w IE nie działa.
Co może być nie tak?
Ja się z takim objawem zetknąłem na stronie czeskiego IM z prognozą pogody. Jakieś dwa lata temu strona została przebudowana i pod IE nie można było z comboxa wybrać godziny. Podobało mi się, że oficjalna strona instytucji państwowej nie działa pod żadną dostępną wersją IE.
OK., no to powiedzmy, że mam taki przykładowy kod tego menu:
A w stylach css mam to tak ogarnięte:
#MENUp {
width: 980px;
margin: 0 auto;
height: 51px;
padding-left:10px;
padding-right:10px;
background: url("tlo.png") repeat-x left;
}
div#Menu {
height: 45px;
float: left;
}
div#Menu a {
color: #FFF;
text-decoration: none;
}
div#Menu ul,
div#Menu li {
margin: 0px;
padding: 0px;
}
div#Menu li {
list-style: none;
list-style-image: none;
position: relative;
padding: 8px 10px;
white-space: nowrap;
}
#Menu #mainLevel {
padding-left: 0px;
height: 35px;
}
#Menu #mainLevel:hover {
background: url("cien.png") repeat-x left;
}
div#Menu a.font {
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
background: url("pasek.png") no-repeat left;
padding-top: 8px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 10px;
text-decoration: none;
display: block;
}
div#Menu ul li:hover {
background: red;
}
/**
- Poziome menu pierwszego poziomu
*/
div#Menu > ul li {
float: left;
}
div#Menu ul ul li {
background: #333;
float: none;
}
/**
- Menu kolejnych poziomow
*/
div#Menu ul ul {
z-index: 50;
display: none;
position: absolute;
top: 51px;
border-left: 1px solid red;
}
div#Menu li:hover > ul {
display: block;
}
/**
- Menu drugiego poziomu - pierwsze rozwiniecie
*/
div#Menu ul ul {
left: 0px;
}
div#Menu ul ul ul {
left: 100%;
top: 0px;
z-index: 75;
}
I na czym polega teraz magia, która zmieniłaby ten kod na przyswajalny dla Explorera 8 i starszych?.......
Kurczę.... Niechcący źle to wkleiłam:P Jeszcze raz:
<div id="MENUp">
<div id="Menu">
<ul>
<li id="mainLevel">
<a class="font" >Home »</a>
<ul>
<li><a href="costam.html">Coś</a></li>
<li><a href="">Inne coś</a></li>
<li><a href="">Jeszcze inne coś</a></li>
</ul>
</li>
<li id="mainLevel">
<a class="font">Bajer »</a>
</li>
<li id="mainLevel">
<a class="font">Antybajer »</a>
</li>
</ul>
</div>
</div>
I tutaj css:
#MENUp {
width: 980px;
margin: 0 auto;
height: 51px;
padding-left:10px;
padding-right:10px;
background: url("tlo.png") repeat-x left;
}
div#Menu {
height: 45px;
float: left;
}
div#Menu a {
color: #FFF;
text-decoration: none;
}
div#Menu ul,
div#Menu li {
margin: 0px;
padding: 0px;
}
div#Menu li {
list-style: none;
list-style-image: none;
position: relative;
padding: 8px 10px;
white-space: nowrap;
}
#Menu #mainLevel {
padding-left: 0px;
height: 35px;
}
#Menu #mainLevel:hover {
background: url("cien.png") repeat-x left;
}
div#Menu a.font {
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
background: url("pasek.png") no-repeat left;
padding-top: 8px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 10px;
text-decoration: none;
display: block;
}
div#Menu ul li:hover {
background: red;
}
/**
* Poziome menu pierwszego poziomu
*/
div#Menu > ul li {
float: left;
}
div#Menu ul ul li {
background: #333;
float: none;
}
/**
* Menu kolejnych poziomow
*/
div#Menu ul ul {
z-index: 50;
display: none;
position: absolute;
top: 51px;
border-left: 1px solid red;
}
div#Menu li:hover > ul {
display: block;
}
/**
* Menu drugiego poziomu - pierwsze rozwiniecie
*/
div#Menu ul ul {
left: 0px;
}
div#Menu ul ul ul {
left: 100%;
top: 0px;
z-index: 75;
}