✔ CSS Down Hoover Menü im IE geht nicht

P

PhoenixDH

Erfahrenes Mitglied
Ich bin mit meinem Latein am Ende!
Hab schon im Netz gesucht, die hover.htc getestet, aber irgendwie funktioniert mein Down Hoover Menü im IE nicht. Alle anderen Browser gehen! Im IE wird das Menü nur als Tree angezeigt.

Hab hier mal den Quellcode:

CSS:
Code: 
body {
	background-color: #FFE1BD;
	scrollbar-face-color: #D2B48C;
	scrollbar-highlight-color: #F5DEB3;
	scrollbar-shadow-color: #D2B48C;
	scrollbar-3dlight-color: #FFF8DC;
	scrollbar-arrow-color:  #8B4513;
	scrollbar-track-color: #FFF8DC;
	scrollbar-darkshadow-color: #8B4513;
}

.forumline	{ background-color: #F5DEB3; border: 2px #8B4513 solid; }

ul.cssmenu {
  position: relative;
  display: block;
  margin: 0px;
  padding: 0px;
}
ul.cssmenu ul {
  position: relative;
  display: none;
}
ul.cssmenu li {
  position: relative;
  display: inline;
  float: left;
}
/* Menupunkt stylen */
ul.cssmenu li a {
  font-family: arial, sans-serif;
  font-size: 12px;
  font-weight:bold;
  line-height: 20px;
  text-decoration: none;
  text-align: center;
  display: block;
  width: 100px;
  height: 20px;
}
ul.cssmenu li:hover > a {
  background-color: #8B4513;
  color: #FFFFFF;
  font-weight: bold;
}
/* Untermenüpunkt einblenden */
ul.cssmenu li:hover > ul {
  position: absolute;
  top: 20px;
  left: -40px;
  display: inline;
}
/* ab zweite Ebene */
ul.cssmenu li li:hover > ul {
  top: 0px;
  left: 110px;
}
ul.cssmenu li li a {
  width: 120px;
}
/* Farben der einzelnen Ebenen (werden vererbt)*/
ul.cssmenu a {
  color: #000000;
  background-color: #FFF8DC;
}
ul.cssmenu ul a {
  background-color: #D2B48C;
  border: 1px #8B4513 solid;
}
ul.cssmenu ul ul a{
  background-color: #c4c4c4;
}
ul.cssmenu ul ul ul a{
  background-color: #b4b4b4;
}
 
/* zusätzliche Styleangaben für IE 6 */
/* das Menü wird dort untereinander dargestellt */
ul.cssmenu {
  _text-indent: 10px;
}
ul.cssmenu ul {
  _display: inline;
  _margin-left: 0px;
  _text-indent: 20px;
}
ul.cssmenu ul ul {
  _text-indent: 30px;
}
ul.cssmenu ul ul ul {
  _text-indent: 40px;
}
ul.cssmenu li {
  _float: none;
}
/* Menupunkt stylen */
ul.cssmenu li a {
  _text-align: left;
  _width: 120px;
}
ul.cssmenu a:hover {
  _font-weight: bold;
  _background-color: #8B4513;
}

HTML:
Code: 
<table>
<tr>
<td class="forumline">

<link rel="stylesheet" href="css.css" type="text/css">


<ul class="cssmenu">
  <li><a href="http://XYT.de/">Forum</a></li>
  <li><a href="http://XYT.de/">Listen</a>
    <ul>
      <li><a href="http://XYT.de/">Mitglieder-Liste</a>
      <li><a href="http://XYT.de/">Nickpage-Liste</a>
      <li><a href="http://XYT.de/">Statistik</a></li>
      <li><a href="http://XYT.de/">Benutzergruppen</a></li>
    </ul>
  </li>
  <li><a href="http://XYT.de/">Kleinanzeiger</a>
    <ul>
      <li><a href="http://XYT.de/">Anzeigen</a></li>
      <li><a href="http://XYT.de/">Anzeige suchen</a></li>
    </ul>
  </li>
  <li><a href="http://XYT.de/">Info</a>
    <ul>
      <li><a href="http://XYT.de/">Kalender</a></li>
      <li><a href="http://XYT.de/">Lexikon</a></li>
      <li><a href="http://XYT.de/">Sitemap</a></li>
    </ul>
  </li>
  <li><a href="http://XYT.de/">Fun</a>
    <ul>
      <li><a href="http://XYT.de/">Bildergalerie</a></li>
      <li><a href="http://XYT.de/">Arcade Spiele</a></li>
      <li><a href="http://XYT.de/">User-Karte</a></li>
    </ul>
  </li>
  <li><a href="http://XYT.de/">Suche</a></li>
  <li><a href="http://XYT.de/">FAQ</a></li>
  <li><a href="http://XYT.de/">Login</a></li>
  <li><a href="http://XYT.de/">Registrieren</a></li>
</ul>

</td>
</tr>
</table>

In der CSS sollte jedoch der IE schon abgefangen werden, was aber auch nicht klappt!

Hoffe ihr könnt mir helfen! Dank euch!
 
Suckerfish hab ich auch schonmal gehört!
Aber geht es nicht das man das obere ein bisschen anpasst, denn das hätte ich jetzt dirtekt fertig mit all den Farben.
 
Zur "Anpassung" wird für den IE6 etwas Javascript-Code benötigt, da er den Selektor "li:hover > ul" zum Einblenden der Submenüs nicht unterstützt.

Oder du schaust dir alternativ Stu Nicholls' Dropdown-Menüs (Kategorie "Menus - Multi-Level - Dropdown") an, die kein JS enthalten, wo du aber neben dem Stylesheet auch den HTML-Code "anpassen" (= erweitern) müsstest.

Da wäre dann die "Suckerfish"-Variante mit dem geringsten Aufwand verbunden, da lediglich das oberste ul-Element mit der ID #nav ausgezeichnet, und eben der JS-Code hinzugefügt werden muß.

mfg Maik
 
Das komische ist, ich habe gerade wieder die Seite gefunden wo ich das Script her habe!

Wenn ich die original Seite im IE aufrufe geht das Bsp. Menü, aber wenn ich den Code zusammenkopiere geht es nicht mehr, hier mal der Link, vielleicht ist das ein Ansatz mir zu helfen, danke!

Klick
 
Bei mir funktioniert das horizontale Dropdown-Menü auf der Beispielseite im IE6 keinesfalls und wird von ihm auch total verkehrt dargestellt:

ie6.jpg

Lediglich im IE7 wird es so dargestellt, wie in den übrigen modernen Browsern, und funktioniert in ihm gleichermaßen, da er den von mir heute Morgen angesprochenen Selektor interpretiert, und somit in ihm auch keine "Hacks" benötigt werden.

Stellt sich die Frage, von welcher IE-Version du hier eigentlich sprichst?

mfg Maik
 
Hab nochmal getestet!
Hab hier den IE 7, da gehts net, im IE6 auch nicht!

Das komische ist, es ist nur der zusammenkopierte Code der nicht geht im IE7, die normale Webseite wird bei mir auch richtig angezeigt.

Was muss ich also machen?
Kann das bitte nochmal jemand so erklären das ich das auch verstehe, bin in CSS Laie!

Danke!"
 
Zuletzt bearbeitet:
Moin,

lies dir doch bitte einfach mal den empfohlenen Artikel Suckerfish Dropdowns durch, und schau dir den Quellcode des Beispiels Suckerfish Dropdowns - One Level Bones näher an.

Darin findest du alle benötigten Infos, um ein Dropdown zu erzeugen, das ebenfalls im IE6 funktioniert.

Im Notfall einfach die Vorlage des Beispiels kopieren, und sie anschliessend auf deine Vorstellungen (Größe,Farben,usw.) anpassen.

mfg Maik
 
PhoenixDH hat gesagt.:
Hab hier den IE 7, da gehts net!

Das komische ist, es ist nur der zusammenkopierte Code der nicht geht im IE7, die normale Webseite wird bei mir auch richtig angezeigt.
Zum Vergrößern anklicken....
Dann hast du den Doctype

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


aus der Beispielseite nicht übernommen, bzw. übergibst deine Seite den Browsern im "Quirksmode", denn im standardkonformen Modus funktioniert das Menü im IE7 einwandfrei:

ie7.jpg

mfg Maik
 
Achso, ok!

Also ich habe jetzt nach langem testen und überlegen doch gewechselt und bin auf das Suckerfish umgestiegen.

Habe dort auch meinen Style eingebunden.

Das einzigste was er im IE6 nicht macht, ist die Hoover Funktionen wenn man auf den ersten Punkt geht wie z.B. Info.

Wenn du mir da nochmal zur Hand gehen würdest wäre ich dir sehr dankbar.
Hier der aktuelle Code:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

<head>
<title>Suckerfish Dropdowns - One Level Bones</title>

<style type="text/css">

body {
	font-family: arial, helvetica, serif;
	background-color: #FFE1BD;
}

.forumline	{ background-color: #F5DEB3; border: 2px #8B4513 solid; }

#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 20px;
}

#nav a {
	display: block;
  	text-decoration: none;
  	font-family: arial, sans-serif;
  	font-size: 12px;
  	font-weight:bold;
	color: black;
}

#nav li { /* all list items */
	float: left;
	width: 90px; /* width needed or else Opera goes nuts */
	height: 20px;
	background-color: #FFF8DC;
}

#nav li ul { /* second-level lists */
	position: absolute;
	width: 120px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

#nav a {
  	color: #000000;
  	background-color: #FFF8DC;
  	text-align: center;
  	text-decoration: none;
}
#nav ul a {
  	background-color: #D2B48C;
  	border: 1px #8B4513 solid;
	width: 120px;
  	height: 20px;
  	text-align: center;
  	text-decoration: none;
}

#nav li:hover > a {
  	background-color: #8B4513;
  	color: #FFFFFF;
  	font-weight: bold;
  	text-align: center;
  	text-decoration: none;
}

#nav li a {
  	text-align: center;
  	text-decoration: none;
}

</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>


</head>

<body>

<table>
<tr>
<td class="forumline">

<ul id="nav">
  <li><a href="http://link.de/">Forum</a></li>
  <li><a href="http://link.de/">Listen</a>
    <ul>
      <li><a href="http://link.de/">Mitglieder-Liste</a>
      <li><a href="http://link.de/">Nickpage-Liste</a>
      <li><a href="http://link.de/">Statistik</a></li>
      <li><a href="http://link.de/">Benutzergruppen</a></li>
    </ul>
  </li>
  <li><a href="http://link.de/">Kleinanzeiger</a>
    <ul>
      <li><a href="http://link.de/">Anzeigen</a></li>
      <li><a href="http://link.de/">Anzeige suchen</a></li>
    </ul>
  </li>
  <li><a href="http://link.de/">Info</a>
    <ul>
      <li><a href="http://link.de/">Kalender</a></li>
      <li><a href="http://link.de/">Lexikon</a></li>
      <li><a href="http://link.de/">Sitemap</a></li>
    </ul>
  </li>
  <li><a href="http://link.de/">Fun</a>
    <ul>
      <li><a href="http://link.de/">Bildergalerie</a></li>
      <li><a href="http://link.de/">Arcade Spiele</a></li>
      <li><a href="http://link.de/">User-Karte</a></li>
    </ul>
  </li>
  <li><a href="http://link.de/">Suche</a></li>
  <li><a href="http://link.de/">FAQ</a></li>
  <li><a href="http://link.de/">Login</a></li>
  <li><a href="http://link.de/">Registrieren</a></li>
</ul>

</td>
</tr>
</table>

</body>

</html>
Kann sein das der Code an manchen Stellen etwas überladen ist!

Das was ich meine hab ich mal als Screen angehängt.

Danke!
 

Anhänge

  • Unbenannt.JPG
    Unbenannt.JPG
    3,9 KB · Aufrufe: 291
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück