Hallo,
ich hab folgendes Problem - habe ein Menü mit 3 Ebenen. Der IE (6 und 7 erkennt jedoch die links der 2 Ebene nicht, das heißt, nicht klickbar und kein Hand-Cursor. -> So sollte es aussehen wenn die Menüpunkte geklickt sind: KLICK
Und so sieht es aus (bei Klick ist der Punkt da - das passt auch - es geht wie gesagt um die Links die nicht erkannt werden) KLICK
CSS dazu hier:
Und HTML dazu hier:
Kennt jemand dieses Phänomen? Wer kann mir weiterhelfen?
Wie gesagt, es funzt in sämtlichen Browsern, nur nicht in den zwei IEs...
ich hab folgendes Problem - habe ein Menü mit 3 Ebenen. Der IE (6 und 7 erkennt jedoch die links der 2 Ebene nicht, das heißt, nicht klickbar und kein Hand-Cursor. -> So sollte es aussehen wenn die Menüpunkte geklickt sind: KLICK
Und so sieht es aus (bei Klick ist der Punkt da - das passt auch - es geht wie gesagt um die Links die nicht erkannt werden) KLICK
CSS dazu hier:
PHP-Code:
/* erste Menüebene */
.content-navi {
width: 173px;
float: left;
margin-right: 35px;
background-color: #e2e3e5;
}
.content-navi a {
display: block;
margin-top: 5px;
padding: 0 15px 5px 15px;
border-bottom: 1px solid #FFFFFF;
font-size: 11px;
color: #023665;
font-weight: bold;
text-decoration: none;
}
.content-navi a:hover {
text-decoration: underline;
}
.content-navi a:active, .content-navi a:focus {
background-image: url(../img/content-navi-punkt.gif);
background-repeat: no-repeat;
background-position: top left;
}
/* zweite Menüebene */
.content-navi2 {
width: 173px;
float: right;
border-bottom: 1px solid #FFFFFF;
background-image: url(../img/content-navi2-bg.gif);
background-repeat: repeat-y;
}
.content-navi2 a {
margin: 5px 0 0 3px;
padding: 0 0 5px 15px;
border-bottom: none;
font-size: 11px;
color: #023665;
font-weight: normal;
text-decoration: none;
}
.content-navi2 a:hover {
text-decoration: underline;
}
.content-navi2 a:active, .content-navi2 a:focus {
background-image: url(../img/content-navi2-punkt.gif);
background-repeat: no-repeat;
background-position: top left;
}
/* dritte Menüebene */
.content-navi3 {
width: 155px;
margin: 0 0 10px 12px;
float: left;
}
.content-navi3 a {
line-height: 10px;
padding: 0 0 3px 10px;
border-bottom: none;
font-size: 10px;
color: #023665;
font-weight: normal;
text-decoration: none;
}
.content-navi3 a:hover {
text-decoration: underline;
}
.content-navi3 a:active, .content-navi3 a:focus {
background-image: url(../img/content-navi3-punkt.gif);
background-repeat: no-repeat;
background-position: top left;
}
Und HTML dazu hier:
PHP-Code:
<div class="content-navi">
<a href="">Hartferritmagnete</a>
<a href="">AlNiCo-Magnete</a>
<a href="">Samarium-Cobalt-Magnete</a>
<a href="">Neodym-Eisen-Bor-<br>
Magnete</a>
<a href="">Kunststoffgebundene<br>
Magnete</a>
<a href="">Greifermagnete</a>
<a href="">Magnetsysteme / <br>Komponenten</a>
<div class="content-navi2">
<a href"#">Kupplungen + Bremsen</a>
<div class="content-navi3">
<a href="">Stirndrehkupplungen</a>
<a href="">Zentraldrehkupplungen</a>
<a href="">Hysteresekupplungen<br>und -bremsen</a>
<a href="">Wirbelstromkupplungen<br>und -bremsen</a>
</div>
<a href"">Magnetsysteme zum Stapeln</a>
<a href"">Magnetsysteme zum Entstapeln</a>
<a href"">Magnetsysteme zum Positionieren</a>
<a href"">Magnetsysteme zur Separation</a>
<a href"">Lasthebemagnete</a>
</div>
<a href="">Zubehör / Messgeräte</a>
<a href="">Literaturhinweise</a>
</div>
Wie gesagt, es funzt in sämtlichen Browsern, nur nicht in den zwei IEs...
Kommentar