1.1k Aufrufe
Gefragt in Webseiten HTML von computer1234 Einsteiger_in (67 Punkte)
Hallo liebe Supportfreunde,

ich habe ein CSS Menü erstellt es funktioniert auch alles wunderbar ABER im IE funktioniert die dropdown Funktion nicht die Submenüs werden nicht angezeigt.

Ich habe gegoogelt und herausgefunden, dass man eine datei.htc schreiben muss mit Javascript um es auch im IE zum laufen zu bringen.

Daher meine Frage:

Kann man es auch ohne Javascript zum laufen im IE bringen?

Danke im Voraus

LG Nils




Code HTML:


<html>
<head>
<title>Bioshock</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body leftmargin="0" marginwidth="0" marginheight="0" rightmargin="0">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr height="160">
<td colspan="2" align="middle" bgcolor="#000000"><img src="Bilder/cover.jpg"></td>
</tr>
<tr>
<td width="200" bgcolor="#000000">
<div class="mainmenu">

<ul>
<li class="li_nc"><a href="/" target="_self" >Home</a></li>
<li class="li_hc"><a href="#" target="_self" >Bioshock</a><ul class="ul_ch">
<li class="li_nc"><a href="#" target="_self" >Story</a></li>
<li class="li_nc"><a href="#" target="_self" >Hauptcharaktere</a></li>
<li class="li_nc"><a href="#" target="_self" >Waffen</a></li>
</ul></li>
<li class="li_hc"><a href="#" target="_self" >Bioshock 2</a><ul class="ul_ch">
<li class="li_nc"><a href="#" target="_self" >Story</a></li>
<li class="li_nc"><a href="#" target="_self" >Hauptcharaktere</a></li>
<li class="li_nc"><a href="#" target="_self" >Waffen</a></li>
</ul></li>
<li class="li_hc"><a href="#" >Bioshock 3</a><ul class="ul_ch">
<li class="li_nc"><a href="#" >Story</a></li>
<li class="li_nc"><a href="#" >Hauptcharaktere</a></li>
<li class="li_nc"><a href="#" >Waffen</a></li>
</ul></li>
<li class="li_nc"><a href="#" >Fotos</a></li>
<li class="li_nc"><a href="#" >Videos</a></li>
<li class="li_nc"><a href="#" >Impressum</a></li>
</ul>


</div>
</td>
<td>
<iframe src="startseite.htm" name="main" width="100%" height="100%" marginheight="0" marginwidth="0" frameborder="0">
</td>
</tr>
</table>
</body>
</html>


Code CSS:


body {
background-color: transparent;

}


.mainmenu{

width: 15em;
padding: 0;
float: left;

}
.mainmenu ul {
float: left;
width: 100%;
list-style: none;
line-height: 1;
color:#000000;
background: #016509;

padding: 0;
border: solid #000080;
border-width: 1px 1px;
margin: 0 0 0 0;
}

.mainmenu a, .mainmenu a:visited {
display: block;
width: 100%;
font-family:Verdana, Arial, Helvetica, sans-serif;font-size:1,5em;font-weight:bold;font-style:normal;text-decoration:none;
color: #000000;
text-decoration: none;
padding: 1em 0em;
text-indent:1em;
margin: 0;

}
.mainmenu li li a{padding:1em;text-indent:0;}
.mainmenu ul ul a{
width:100%;
height:100%;
}
.mainmenu ul a{
width: 100%;
}


.mainmenu li {
float: left;
width:100%;
margin:0;
padding:0;
}

.mainmenu ul li {float:left; position:relative; }
.mainmenu ul li {width:100%;} /* !!!!! */

.mainmenu li ul {
position: absolute;
left: -999em;
height: auto;
width:15em;
background: #016509;
font-weight: normal;
border-width: 1px;
margin: 0;
}

.mainmenu li li {
width: 100% ;
}
.mainmenu li a{width: 100% ; }
.mainmenu li li a{
width: 100%;
}

.mainmenu li ul {
margin: -2.1em 0 0 -0.3em;
}
.mainmenu li ul ul {
margin: -2.1em 0 0 -0.3em;
}
.ul_ch,
.mainmenu li:hover ul ul,
.mainmenu li li:hover ul ul,
.mainmenu li li li:hover ul ul,
.mainmenu li li li li:hover ul ul,
.mainmenu li li li li li:hover ul ul
{
left: -999em;
}
.mainmenu li:hover ul,
.mainmenu li li:hover ul,
.mainmenu li li li:hover ul,
.mainmenu li li li li:hover ul,
.mainmenu li li li li li:hover ul
{
left: 100%;
}
.mainmenu li:hover>ul.ul_ch
{
left: 100%;
}

.mainmenu li:hover{
background: #008000;
}

.mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{
color:#FFFF00;
}
.mainmenu li:hover li a, .mainmenu li li:hover li a,
.mainmenu li li li:hover li a, .mainmenu li li li li:hover li a,
.mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited,
.mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited
{
color:#000000;
}
.mainmenu li li:hover, .mainmenu li li li:hover,
.mainmenu li li li li:hover , .mainmenu li li li li li:hover , .mainmenu li li li li li li:hover
{
background: #008000;
z-index:9999;
}
.mainmenu li li:hover a,.mainmenu li li li:hover a,
.mainmenu li li li li:hover a, .mainmenu li li li li li:hover a
{
color: #FFFF00;
}

.mainmenu ul ul a, .mainmenu ul ul a:visited,
.mainmenu li li a, .mainmenu li li a:visited
{
color: #000000;
}
.mainmenu ul ul a:hover,
.mainmenu li:hover li:hover a,.mainmenu li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited{
color: #FFFF00;
}
.mainmenu li:hover li:hover li a,.mainmenu li:hover li:hover li a:visited ,
.mainmenu li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hove

3 Antworten

0 Punkte
Beantwortet von
ältere IEs kennen :hover ausschließlich in Verbindung mit <a>. Du versetzt (wenn dies wirklich dein Code ist) die Browser in den Quirksmode[sup]1)[/sup] (was nie eine gute Idee ist, um browserübergreifend zu layouten) und das bewirkt bei neueren IEs, dass sie sich zT. wie uralte verhalten.

1) siehe http://de.wikipedia.org/wiki/Quirksmode
0 Punkte
Beantwortet von computer1234 Einsteiger_in (67 Punkte)
also was ist deine empfehlung was kann ich tun?

habe IE 9
0 Punkte
Beantwortet von
zuerst:
eine geeignete Doctype-Declaration einfügen, damit der Browser aus dem Quirksmode kommt (hast du den verlinkten Beitrag in Antwort 1gelesen? Wenn nicht wäre jetzt ein guter Zeitpunkt!)

danach:
validiere dein CSS (1,5 ist keine gültige Zahl)

letztlich:
entrümpele HTML vom Tabellenlayout
prüfe, ob wirklich alle CSS-Angaben nötig sind (li:hover li:hover ist Quatsch, denn wenn ein Element gehovert ist, ist es dessen Elternelement automatisch)
...