Dropdownmenü funktioniert nur im IE9 mit Kompatibilitätsmodus

A

aherzog

Erfahrenes Mitglied
Hallo miteinander.

Auf einer meiner Seiten wollte ich ein schöneres Menü hinzufügen.
Dazu hab ich Dropdownmenü per CSS erstellt.
Das Menü funktioniert im IE8 wunderbar. Im IE9, ohne Kompatibilitätsmodus kommen die Untermenü nicht.
Mit einegeschaltetem Kompatibilitätsmodus gehts wunderbar.

Was mach ich falsch, damit das Menü auch im IE9 ohne Kompatibilitätsmodus läuft?

Hier der Link zur Test-Seite: http://www.fvweinfelden.ch/index2.php

Das wäre der Code:

CSS:
HTML: 
<style type="text/css"> 
body { 
font-family:Arial; font-size:10pt; 
} 

#menuebox { 
position: relative; 
height: 30px; 
} 
.stupidie { 
display: none; 
} 
#menue { 
position:absolute; 
top: 5px; 
left: 5px; 
z-index: 200; 
} 

#menue .aussen1 { 
float: left; 
display: block; 
overflow: hidden; 
width: 4em;                                                        /* Menübreite */ 
height: 1.3em; 
font-weight: bold;                                                /*Menü*/ 
text-align: center;                                               /*Menü*/ 
color: Sienna;                                                    /*Menü Schriftfarbe*/ 
border: 0px solid; 
border-color: #d0843e #78561d #78561d #d0843e; 
margin: 5px;                                                      /*Menü Abstand Reiter*/ 
box-shadow: #666 1px 2px 3px; 

-pie-background: linear-gradient(270deg, YellowGreen, GreenYellow); 
behavior: url(css3pie/PIE.htc);} 
} 
#menue .aussen1:hover { 
height: auto; 
background-color: YellowGreen; 
color: Black; 
} 
a.innen-1 { 
margin-top: 1px; 
} 
a.innen, 
a.innen-1 { 
display: block; 
width: 4em; 
padding: 2px 0; 
text-decoration: none; 
font-weight: normal; 
border-bottom: 0px solid white; 
background-color: GreenYellow; 
color: Sienna; 
} 
a:visited.innen, 
a:visited.innen-1 { 
background-color: GreenYellow; 
color:SlateGray; 
} 
a:hover.innen, 
a:hover.innen-1 { 
background-color: YellowGreen; 
color: Black; 
} 
span.menutag1 { 
display: block; 
cursor: default; 
} 



#menue .aussen2 { 
float: left; 
display: block; 
overflow: hidden; 
width: 7em;                                                       /* Menübreite */ 
height: 1.3em; 
font-weight: bold;                                                /*Menü*/ 
text-align: center;                                               /*Menü*/ 
color: Sienna;                                                    /*Menü Schriftfarbe*/ 
border: 0px solid; 
border-color: #d0843e #78561d #78561d #d0843e; 					 
margin: 5px;                                                      /*Menü Abstand Reiter*/ 
box-shadow: #666 1px 2px 3px; 
-pie-background: linear-gradient(270deg, YellowGreen, GreenYellow); 
behavior: url(css3pie/PIE.htc);} 
} 
#menue .aussen2:hover { 
height: auto; 
background-color: YellowGreen; 
color: Black; 
} 
a.innen-2 { 
margin-top: 1px; 
} 
a.innen-2 { 
display: block; 
width: 7em; 
padding: 2px 0; 
text-decoration: none; 
font-weight: normal; 
border-bottom: 0px solid white; 
background-color: GreenYellow; 
color: Sienna; 
} 
a:visited.innen-2 { 
background-color: GreenYellow; 
color:SlateGray; 
} 
a:hover.innen-2 { 
background-color: YellowGreen; 
color: Black; 
} 
span.menutag2 { 
display: block; 
cursor: default; 
} 



#menue .aussen3 { 
float: left; 
display: block; 
overflow: hidden; 
width: 6em;                                                       /* Menübreite */ 
height: 1.3em; 
font-weight: bold;                                                /*Menü*/ 
text-align: center;                                               /*Menü*/ 
color: Sienna;                                                    /*Menü Schriftfarbe*/ 
border: 0px solid; 
border-color: #d0843e #78561d #78561d #d0843e; 
margin: 5px;                                                      /*Menü Abstand Reiter*/ 
box-shadow: #666 1px 2px 3px; 
-pie-background: linear-gradient(270deg, YellowGreen, GreenYellow); 
behavior: url(css3pie/PIE.htc);} 
} 
#menue .aussen3:hover { 
height: auto; 
background-color: YellowGreen; 
color: Black; 
} 
a.innen-3 { 
margin-top: 1px; 
} 
a.innen-3 { 
display: block; 
width: 6em; 
padding: 2px 0; 
text-decoration: none; 
font-weight: normal; 
border-bottom: 0px solid white; 
background-color: GreenYellow; 
color: Sienna; 
} 
a:visited.innen-3 { 
background-color: GreenYellow; 
color:SlateGray; 
} 
a:hover.innen-3 { 
background-color: YellowGreen; 
color: Black; 
} 
span.menutag3 { 
display: block; 
cursor: default; 
} 


#menue .aussen4 { 
float: left; 
display: block; 
overflow: hidden; 
width: 6.5em;                                                     /* Menübreite */ 
height: 1.3em; 
font-weight: bold;                                                /*Menü*/ 
text-align: center;                                               /*Menü*/ 
color: Sienna;                                                    /*Menü Schriftfarbe*/ 
border: 0px solid; 
border-color: #d0843e #78561d #78561d #d0843e; 
margin: 5px;                                                      /*Menü Abstand Reiter*/ 
box-shadow: #666 1px 2px 3px; 
-pie-background: linear-gradient(270deg, YellowGreen, GreenYellow); 
behavior: url(css3pie/PIE.htc);} 
} 
#menue .aussen4:hover { 
height: auto; 
background-color: YellowGreen; 
color: Black; 
} 
a.innen-4 { 
margin-top: 1px; 
} 
a.innen-4 { 
display: block; 
width: 6.5em; 
padding: 2px 0; 
text-decoration: none; 
font-weight: normal; 
border-bottom: 0px solid white; 
background-color: GreenYellow; 
color: Sienna; 
} 
a:visited.innen-4 { 
background-color: GreenYellow; 
color:SlateGray; 
} 
a:hover.innen-4 { 
background-color: YellowGreen; 
color: Black; 
} 
span.menutag4 { 
display: block; 
cursor: default; 
} 
</style>

DIVS:
HTML: 
<div id="menuebox"> 
	<div id="menue"> 
              <div class="aussen1"> 
                      <span class="menutag1">Home</span> 
                              <a class="innen-1" href="#">Starts.</a> 
              </div> 
              <div class="aussen1"> 
                      <span class="menutag1">Verein</span> 
                              <a class="innen-1" href="#">Verein</a> 
              </div> 
              <div class="aussen2"> 
                      <span class="menutag2">Vorstand</span> 
                              <a class="innen-2">Mitgliedschaft</a> 
                              <a class="innen-2">Jahres-<br>programm</a> 
                              <a class="innen-2">Patentausgabe</a> 
                              <a class="innen-2">Jahrespatente</a> 
                              <a class="innen-2">SaNa-Kurs</a> 
                              <a class="innen-2">Kontakt</a> 
                              <a class="innen-2">Statuten</a> 
                              <a class="innen-2">Fischerei-<br>aufsicht</a> 
              </div> 
              <div class="aussen3"> 
                      <span class="menutag3">Anl&auml;sse</span> 
                              <a class="innen-3" href="#">Vereins-<br>fischen</a> 
              </div> 
              <div class="aussen2"> 
                      <span class="menutag2">Jungfischer</span> 
                              <a class="innen-2">F&ouml;rderung</a> 
                              <a class="innen-2">Ferienpass</a> 
                              <a class="innen-2">Jungmitglied-<br>schaft</a> 
                              <a class="innen-2">Jugendpatente</a> 
                              <a class="innen-2">Kontakt</a> 
              </div> 
              <div class="aussen3"> 
                      <span class="menutag3">Gew&auml;sser</span> 
                              <a class="innen-3" href="#">Beschreibung</a> 
                              <a class="innen-3" href="#">Gew&auml;sser-<br>karte</a> 
                              <a class="innen-3" href="#">Fische</a> 
                              <a class="innen-3" href="#">Renaturierung</a> 
                      </div> 
              <div class="aussen2"> 
                      <span class="menutag2">Fischerei</span> 
                              <a class="innen-2">Kant. Sport-<br>fischerpr&uuml;fung</a> 
                              <a class="innen-2">Schw. Sport-<br>fischerprevet</a> 
                              <a class="innen-2">Vorschriften</a> 
                              <a class="innen-2">Ethik SFV</a> 
                              <a class="innen-2">Fischerei-<br>techniken</a> 
                              <a class="innen-2">Ausr&uuml;stung</a> 
                              <a class="innen-2">Fliegenfischen</a> 
              </div> 
              <div class="aussen1"> 
                      <span class="menutag1">Gallerie</span> 
                              <a class="innen-1" href="#">Gallerie</a> 
              </div> 
              <div class="aussen1"> 
                      <span class="menutag1">Links</span> 
                              <a class="innen-1" href="#">Links</a> 
              </div> 
              <div class="aussen4"> 
                      <span class="menutag4">Downloads</span> 
                              <a class="innen-4" href="#">Downloads</a> 
              </div> 
       </div> 
</div>

Vielen Dank für die Hilfe und Gruss
Andreas
 
Hmmmm... erstellt hab ichs auf einem pc mit ie8 und da hats funktioniert.
hier gehts mit den IE9 und Kompatibilitäsmodus auch.. Aber scheinbar auch nur auf dem ie8 und ie9..
Hab jetzt grad noch mit Safari getestet, und geht auch nicht.


Arggg.. dann muss ich woll nochmal von vorne beginnen.

Na gut...Danke
 
aherzog hat gesagt.:
Das Menü funktioniert im IE8 wunderbar. Im IE9, ohne Kompatibilitätsmodus kommen die Untermenü nicht.
Mit einegeschaltetem Kompatibilitätsmodus gehts wunderbar.
Zum Vergrößern anklicken....
Nachtrag zu dieser Anmerkung: meine IE8-Einstellung lautet folgendermaßen, um die versteckten Submenüs zu Gesicht zu bekommen:


  • Browsermodus: IE8 oder IE8-Kompatibilitätsansicht
  • Dokumentmodus: IE7-Standards
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück