Wie der ein Problem mit CSS Menü und IE

[labida]

Erst einmal ein Hallo ins Forum :)

Ich habe da ein kleines Problemchen ;(

Ich habe eine Seite gebaut und hab dort ein CSS Menü eingefügt.
Dieses klappt auf wenn man darüber geht. Das Problem ist nun, das ich nur auf den ersten Unterpunkt komme.
Wenn ich auf den 2. Punkt oder darunter gehe, schließt der IE das Menü ;(
Mit anderen Browsern funktioniert das ohne Probleme.

Hat da jemand eine Idee?

Hier noch der Code meiner CSS Datei:

/*klapp-menü */


#all        {
        width:840px;
        height:100%;
        padding: 0px;
        margin:0 auto;
        text-align:center;
}


/* menue oben */


.menu {
        width:100%;
        height:40px;
        background-color:#fff;
        position:relative;
        z-index:100;
}
.menu ul li a, .menu ul li a:visited {
        display:block;
        text-decoration:none;
        color:#4f4f4f;
        background-color:#F7F7F7;
        font-family:verdana, sans-serif;
        font-size: 12px;
        font-variant:normal;
        overflow:hidden;
        width: 206px;
        margin:1px 1px 1px 1px;
        border:solid 1px #CFCFCF;
        line-height:39px;
        text-align:center;


}
.menu ul {
        padding:0;
        margin:0 auto;
        list-style: none;
}
.menu ul li {
        float:left;
        position:relative;margin:0px 0px 0px 0px;
}
.menu ul li ul {
        display: none;
}


/* specific to non IE browsers */
.menu ul li:hover a {
        background-color:#fff;
        color:#000;
        text-decoration:none ;
        border:solid 1px #bfbfbf;
          margin:1px 1px 1px 1px;
       }
.menu ul li:hover ul {
        display:block;
        position:absolute;
        top:42px;
        left:0;
        width:206px;
}
.menu ul li:hover ul li a.hide {
        background-color:#EFEFEF;
        color:#000;
}
.menu ul li:hover ul li:hover a.hide {
         background-color:#efefef;
        color:#000;
}
.menu ul li:hover ul li ul {
        display: none;
}




/* farb-änderungen der aufklapp-untermenüs, zb seite 11 bis 14  */
.menu ul li:hover ul li a {
        display:block;
background-color:#EFEFEF;
        color:#000;
        font-style:italic;
        border:solid 1px #bfbfbf;
        line-height:40px;
background-repeat:repeat;
        -moz-opacity: 0.70;
opacity: 0.85;


}


/* farb-änderungen nur eines einzelnen punktes der aufklapp-untermenüs, zb. seite 11*/
.menu ul li:hover ul li a:hover {
        background-color:#fff;
        color:#000;
        text-decoration:none ;
        border:solid 1px #bfbfbf;}




/* =============================================================== */






/* menue unten */


#menu1 a, #menu1 a:visited , #menu1 a:active {display: block;
color:#7F7F7F;
font-size: 14px;line-height: 20px;
font-family: tahoma,verdana,arial,helvetica, verdana, tahoma, sans-serif;
padding-left: 10px;padding-right: 10px; padding-bottom: 0px; padding-top:0px;
margin-left: 0px;margin-right: 0px;
height:20px;
line-height:20px;
text-align:center;
background-color:#;
text-decoration:underline ;
}


#menu1 a:hover {color:#000; text-decoration:none ;
background:transparent;
text-decoration:none ;
}


/* =============================================================== */


/* allgemeine links im text */


a:link, a:visited, a:active{
font-size: 16px;line-height: 22px;
font-family: tahoma,verdana,arial,helvetica, verdana, tahoma, sans-serif;
text-decoration:underline;color:#707070;}


/* a:hover{ text-decoration:none;background-color:#fff;
color:#7F7F7F;text-decoration:none;}


h2 a:hover{ text-decoration:none;background-color:#fff;
color:#7F7F7F;text-decoration:none;}
/* =============================================================== */

Und hier mein HTML Code für das Menü:

 <div class="menu" >  <!-- unteres Menu --><ul><li><a class="hide" href="#">Bilder Jahreszeiten</a><!--[if lte IE 6]><a href="#">Gruppe1<table><tr><td><![endif]--><ul><!--li><a href="sommer.html">Bilder Jahreszeiten</a></li--><li><a href="sommerimpressionen.html">Sommerimpressionen</a></li><li><a href="winterimpressionen.html">Winterimpressionen</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

Einen lieben Gruß
Alex

 

[threadi]

Du hast bei ".menu ul li" keinen z-index definiert. Diese Conditional Comments für den IE sind für solche Menüs völlig unnötig. Außerdem wäre auch noch der Rest der Seite interessant. Hast Du vlt. einen Link parat?

 

[threadi]

Hab den Link per PN bekommen, obwohl das sicherlich auch andere interessieren würde ..

Da die Seite auf Tabellen aufbaut ist eine Lösung hierfür etwas schwierig. Pauschal könntest Du für alle Tabellen

table {
 position: relative;
 z-index: 1;
}

definieren. Ob das der IE mitmacht, weiß ich nicht - habe auch keinen hier um das zu prüfen. Ohne diese vielen Tabellenkonstrukte wäre es sicherlich einfacher.

 

[labida]

Moinsen,

vielen Dank für Deine Info.
Leider kölappt das anscheinend nicht ;(

Ich stell hier mal den Link rein und währe dankbar zu jedem Tipp.
Ansonsten muss ich Wohl die ganze Seite neu machen ;(

homepage, dokument, webpage, page, web, netz, homepage dokument webpage page web netz

Als Vorlage für das Menü hatte ich folgendes verwendet: homepage vorlagen ( templates , gratis ). private homepages erstellen. vorlagen umsonst, und weitere für wenig geld.
Und hier das Template 17.

Komischer weise funktioniert hier das Menü ohne Probleme ;(

Einen lieben Gruß
Alex

 

[threadi]

Bei dieser Template-Vorlage ist der HTML-Code ja auch anders, insbesondere was den Content-Bereich angeht. Das kann hierbei durchaus eine Rolle spiele. Du hast die Vorlage folglich zu sehr angepasst.

 

[labida]

done
es lag am Hintergrundbild.
Ich hatte es im HTML eingebunden. Nachdem ich dort über die CSS eingesetzt hatte funktioniert es jetzt :)

THX @ All

 

[threadi]

Bei mir ist es zu sehen.