Drop Down Menü wird nicht im ie angezeigt

Airfidh · #1 (**permalink**) 02.08.2008, 13:05

Hallo.

Ich habe erst vor kurzem mit dem programmieren begonnen.
Nun habe ich nach langer Arbeit mir ein Drop Down Menü zusammengestellt.
Leider funktioniert es nur in Opera und Firefox. Im IE wird zwar das Menü angezeigt, aber wenn man mit der Maus auf "Ausstellung" geht öffnen sich die Unterpunkte nicht.
Könntet ihr mir vielleicht bei meinem Problem weiterhelfen? wäre sehr nett!!

Hier der CSS-Code:

#leftmenu {
position: absolute;
z-index: 1;
top: 150px;
left: 0px;
padding: 0;
margin-top: 15px;
margin-left: 10px;
width: 130px;
background: #FFFFFF;
}

#leftmenu ul {
list-style: none;
margin: 0;
padding: 0;
}

#leftmenu a {
font: bold 20px arial, hevetica, sans-serif;
display: block;
border-left: 1px;
border-right: 1px;
border-top: 1px;
border-buttom: 1px;
border-style: solid;
border-color: #FFFFFF;
margin-top: 15px;
padding: 2px 3px;
}

#leftmenu a {
color: #000000;
background: #FFFFFF;
text-decoration: none;
}

#leftmenu b {
font: bold 20px arial, hevetica, sans-serif;
display: block;
border-left: 1px;
border-right: 1px;
border-top: 1px;
border-buttom: 1px;
border-style: solid;
border-color: #FFFFFF;
margin-top: 1px;
padding: 0;
}

#leftmenu b {
color: #000000;
background: #FFFFFF;
text-decoration: none;
}

#leftmenu a:hover, #leftmenu h1:hover {
color: #FFFFFF;
background: #333333;
}

#leftmenu h1 {
font: bold 14px arial, hevetica, sans-serif;
display: block;
margin: 0;
padding: 2px 3px;
}

#leftmenu h1 {
color: #000000;
background: #FFFFFF;
text-decoration: none;
}

#leftmenu li {
position: relative;
}

#leftmenu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 110px;
}

#leftmenu ul ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 50px;
}

div#leftmenu ul ul ul,
div#leftmenu ul ul li:hover ul ul
{display: none;}

div#leftmenu ul ul li:hover ul,
div#leftmenu ul ul ul li:hover ul
{display: block;}

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Endversion</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />

</head>
<body>
<div id="leftmenu">
<ul>
<ul>
<li><a href="aktuelles.htm">Aktuelles</a></li>
<li><a href="der_dobi.htm">Der Dobi</a></li>
</ul></li>

</ul>
<ul>
<ul>
<li><a href="ausstellung.htm">Ausstellung</a>
<ul>
<li><b href="#">
<h1>Ergebnisse</h1>
</b>

<ul>
<li><b href="ausstellung2008.htm">
<h1>2008</h1>
</b></li>
<li><b href="ausstellung2007.htm">
<h1>2007</h1>
</b></li>
</ul>
</li>
<li><b href="meldeschein.htm">
<h1>Meldeschein</h1>
</b></li>
</ul>
</li>
</ul>
</ul>
<ul>
<ul>
<li><a href="ztp.htm">ZTP</a></li>
<li><a href="fotos.htm">Fotos</a></li>
<li><a href="kalender.htm">Kalender</a></li>
<li><a href="impressum.htm">Impressum</a></li>
<li><a href="links.htm">Links</a></li>
</ul>
</ul>
</div>
</body>
</html>

Praktikant · #2 (**permalink**) 02.08.2008, 14:12

Ich verstehe grad nicht, warum eine Liste öffneste, die so aussieht:

Code:

<ul>
<ul>
   <li><a href="#">Link1</a></li>
</ul>
</ul>

Das ist doch schonmal komplett falsch... auf diese Weise kannst du nicht 2 Listen inander setzten.

Du musst das so machen:

Code:

<ul>
   <li><a href="#">Link1</a>
      <ul>
         <li><a href="#">Link1.1</a></li>
         <li><a href="#">Link1.2</a>
             <ul>
                 <li><a href="#">Link1.2.1</a></li>
                 <li><a href="#">Link1.2.2</a></li>
             </ul>
         <li><a href="#">Link1.3</a></li>
      </ul>
   </li>
</ul>

Deine CSS dürfte so aber stimmen, wenn der schon aufgehen. Wenn es nichtmeh geht, dann muss du halt die "Wege" ändern. Also zum Beipiel muss dann aus
div#leftmenue ul ul li
div#leftmenue ul li ul li
werden.

Airfidh · #3 (**permalink**) 02.08.2008, 15:08

habe meine css und html datei geändert.
ich hoffe es ist jetzt richtig.
Leider aber geht das Menü unter IE 5 bis 6 immer noch nicht auf und
bei IE 7 schließt sich das menü sofort wenn ich von "Austellungs" mit meiner
Maus nach rechts auf die unterpunkte komme.

Hier die neuen Dateien:

CSS:
#leftmenu {
position: absolute;
z-index: 1;
top: 150px;
left: 0px;
padding: 0;
margin-top: 15px;
margin-left: 10px;
width: 130px;
background: #FFFFFF;
}

#leftmenu ul {
list-style: none;
margin: 0;
padding: 0;
}

#leftmenu a {
font: bold 20px arial, hevetica, sans-serif;
display: block;
border-left: 1px;
border-right: 1px;
border-top: 1px;
border-buttom: 1px;
border-style: solid;
border-color: #FFFFFF;
margin-top: 15px;
padding: 2px 3px;
}

#leftmenu a {
color: #000000;
background: #FFFFFF;
text-decoration: none;
}

#leftmenu b {
font: bold 20px arial, hevetica, sans-serif;
display: block;
border-left: 1px;
border-right: 1px;
border-top: 1px;
border-buttom: 1px;
border-style: solid;
border-color: #FFFFFF;
margin-top: 1px;
padding: 0;
}

#leftmenu b {
color: #000000;
background: #FFFFFF;
text-decoration: none;
}

#leftmenu a:hover, #leftmenu h1:hover {
color: #FFFFFF;
background: #333333;
}

#leftmenu h1 {
font: bold 14px arial, hevetica, sans-serif;
display: block;
margin: 0;
padding: 2px 3px;
}

#leftmenu h1 {
color: #000000;
background: #FFFFFF;
text-decoration: none;
}

#leftmenu li {
position: relative;
}

#leftmenu ul ul{
position: absolute;
top: 0;
left: 100%;
width: 110px;
}

#leftmenu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 50px;
}

div#leftmenu ul ul,
div#leftmenu ul li:hover ul
{display: none;}

div#leftmenu ul li:hover ul,
div#leftmenu ul ul li:hover ul
{display: block;}

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Endversion</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />

</head>
<body>

<div id="leftmenu">
<ul>
<li><a href="Neuer%20Ordner%20(3)/aktuelles.htm">Aktuelles</a></li>
<li><a href="Neuer%20Ordner%20(3)/der_dobi.htm">Der Dobi</a></li>
</ul>
<ul>
<li><a href="Neuer%20Ordner%20(3)/ausstellung.htm">Ausstellung</a>
<ul>
<li><b href="#">
<h1>Ergebnisse</h1>
</b>
<ul>
<li><b href="ausstellung2008.htm">
<h1>2008</h1>
</b></li>
<li><b href="ausstellung2007.htm">
<h1>2007</h1>
</b></li>
</ul>
</li>
<li><b href="meldeschein.htm">
<h1>Meldeschein</h1>
</b></li>
</ul>
</li>
</ul>
<ul>
<li><a href="Neuer%20Ordner%20(3)/ztp.htm">ZTP</a></li>
<li><a href="Neuer%20Ordner%20(3)/fotos.htm">Fotos</a></li>
<li><a href="Neuer%20Ordner%20(3)/kalender.htm">Kalender</a></li>
<li><a href="Neuer%20Ordner%20(3)/impressum.htm">Impressum</a></li>
<li><a href="Neuer%20Ordner%20(3)/links.htm">Links</a></li>
</ul>
</div>

</body>
</html>

Praktikant · #4 (**permalink**) 02.08.2008, 15:24

Kurz mal nen paar Fragen... ist das der komplette Quellcode??
Wenn ja... Warum schließ du Tags die du nciht geöffnet hast?
und... Seit wann definiert man Links mit dem buschstaben b ?? Bei mir sehen Links sehen Links immer so aus:

<a href="#" title="Test">Link</a>

wobei title aber obtional ist.

Dann.. weitere Fragen: Schonmal die Seite wo hochgeladen?? Wenn ja, dann zeig doch mal nen Onlinebeispiel der Seite....
Hast du schonmal unter World Wide Web Consortium - Web Standards den HTML und CSS Validator ausprobiert...

Und ne Antwort: sobald du im Navi beim Link die Schrift- oder hintergrundfarbe änderst dürfte es auch in IE6 wieder gehen. Sonst brauchst du ne JavaScript Datei für den IE6. Bau aber erstmal dein Navi valide auf

Edit: pack doch mal Quelltext in die dafür Vorgesehen Tags rein... Danke

inta · #5 (**permalink**) 02.08.2008, 23:49

Validiere deinen Code. Lies die Hinweise für Fragende und stell am besten einen Link zu deinem Problem hier ein, oder verwende wenigstens die entsprechenden BB-Codes für deine Codebeispiele.

Wenn deine Navigation auch in älteren Browsern ohne Javascript auskommen soll, dann dürfte dieses Beispiel von Stu Nicholls für dich interessant sein.

skyrage · #6 (**permalink**) 02.08.2008, 23:58

Hmm, soweit wie ich weis unterstüzt der IE6 Hover nur auf Links.

Du kannst die Hoverfunktion dem Internet Explorer 6 allerdings beibringen,
indem du dieses Skript in einer htc Datei einfügst:
http://www.xs4all.nl/~peterned/htc/csshover.htc

... und dann noch den folgenden Code in einem extra Stylesheet für den IE6 einbindest:

Code:

body {
  behavior:url("csshover.htc");
}

(Hauptquelle: Drop-Down-Navigationsmenü mit CSS und (fast) ohne Javascript - Tutorial - Peter Kröner - Die Kunst des Machbaren)

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Drop down Menü bleibt aktiv nach zurück mit back button vom Firefox	gombi	CSS	0	18.01.2010 16:34
CSS Drop Down Menü	gachet	CSS	9	08.11.2009 19:36
Drop down menü geht im IE 6 nicht	silverblack	CSS	3	10.06.2007 21:36
Fehler mit Drop Down Menü bei Überschreitung der Container Grenzen!	webfabrik	CSS	4	16.01.2007 02:29