✔ Dropdown funktioniert nicht

Status
Nicht offen für weitere Antworten.
M

Merbi

Nabend zusammen,

habe mich jetzt für ein Design endschieden und ein Drop Down gebastelt.
Nur läuft es nun nachdem ich es hochgeladen habe nicht mehr.

Wäre nett wenn ihr mal kurz drüber gucken könntet.

Link


1000 Dank

Daniel
 
Ich habe ein anderes Dropdown Menü gemacht das so auch Offline funktioniert hat und als ich es in das CSS für meine Seite kopiert habe sind Fehler aufgetreten, weiß aber nicht warum das plötzlich streikt.

Code HTML:

Code: 
<div id="navigation">
	
	<ul id="nav">
	<li><a href="index.php?id=startseite.php">Startseite</a></li>
  	<li>Über&nbsp;mich
	<ul>
	<li><a href="">Ich</a></li>
	<li><a href="">Mein PC</a></li>
	<li><a href="">Meine Freunde</a></li>
	</ul>
	</li>
	<li><a href="">Newsarchiv</a></li>
	<li><a href="index.php?id=gaestebuch.php">Gästebuch</a></li>
	<li><a href="">Galerie</a></li>
	<li><a href="">Videos</a></li>
	<li><a href="index.php?id=kontakt.php">Kontakt</a></li>
	<li><a href="index.php?id=impressum.php">Impressum</a></li>
	<li id="time" class="zeit"></li>
	<li>&nbsp;Uhr</li>
	</ul>
  
	</div>

Javascript:

Code: 
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;


CSS:

Code: 
#navigation {
        padding-right: 0px;
        padding-left: 0px;
        padding-bottom: 30px;
        margin-top: -25px;
        padding-top: 0px;
        z-index:10;
}

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

li {
	float: left;
	position: relative;
	margin-left: 10px;	
}

li ul {
	position: absolute; 
	display: none;
	top: 1em;
	left: 0;
}

li:hover ul { 
	background-image: url(images/space.png);
}

bzw im IE:

Code: 
li {
	width: 0em;
	margin-left: 10px;	
}

li:hover ul, li.over ul{ 
	display: block; 
}

Damit sollte es doch eigentlich gehen.

LG Daniel
 
Mit diesem Codeschnippsel, der aus der genannten Seite stammt, und den ich eben noch sichern konnte, bevor du die Seite vom Server genommen hast, funktioniert das Menü in den modernen Browsern soweit einwandfrei :p

Da du nun die ID von #navigation in #nav umbenannt hast, lautet das Stylesheet:
Code: 
/* --- Navigation --- */

ul#nav {
        padding-right: 0px;
        padding-left: 0px;
        padding-bottom: 30px;
        margin: -25px 1.8em 0px 2em;
        padding-top: 0px;
        z-index:10;
}

ul#nav li {
        position: relative;
        float: left;
        display: inline;
        list-style-type: none;
}

* html ul#nav li {
        margin-bottom: 0px;
}

ul#nav a {
        display: block;
        padding-right: 0.3em;
        padding-left: 0.3em;
        padding-bottom: 0.1em;
        padding-top: 0.1em;
        text-decoration: none;
}

* html ul#nav a {
        width: 6.4em;
}

ul#nav li ul {
        position: absolute;
        padding-right: 0px;
        display: none;
        padding-left: 0px;
        left: 0px;
        padding-bottom: 0px;
        margin: 0px;
        padding-top: 0px;
        top: 1.5em;
}

* html ul#nav li ul {
        left: -0.2em;
}

ul#nav li:hover ul {
        display: block
}

ul#nav li ul li {
        background-image: url(images/space.png);
        display: block;
        float: none;
        margin-bottom: 0px;
}
Für den IE <7 empfehle ich dir http://www.htmldog.com/articles/suckerfish/dropdowns/
 
Ja der Server gehört nicht mir der ist nem Kumpel.
Die Beiden Minus haben garnichts gemeinsam weil ich ein neues von (ich glaub es war sogar suckerfish oder so) angefangen habe um das mal komplett zu verstehen nur verstehe ich hallt nicht wieso das plötzlich nicht mehr geht weil es eben noch ging aber dann probiere ich kurz noch was rum.

LG Daniel
 
Wie auch immer, mein zuletzt genannter Link hält alles bereit, was du für die Funktionstüchtigkeit des Menüs in allen Browsermodellen benötigst.
 
Hab den Fehler gefunden:

Code: 
display: block;

hat gefehlt.

Nun ist nur durch das
Code: 
margin-left: 10px;
das Dropdown sehr eng so das da ein Zeilenumbruch entsteht.
Kann ich das irgendwie umgehen so das das Untermenü immer 100% breit ist und das es erst unter dem header anfängt damit das Transparente das andere nicht überlagert.

LG Daniel

Edit: War zu voreilig läuft nur im FF nicht im IE.
 
Bevor wir uns jetzt hier im Kreise drehen, empfehle ich dir zum Abschluss folgenden Code:

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

#nav a {
        display: block;
        width: 8em;
}

#nav li { /* all list items */
        float: left;
        width: 8em; /* width needed or else Opera goes nuts */
}

#nav li ul { /* second-level lists */
        position: absolute;
        background: url(images/space.png);
        width: 8em;
        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;
}
Javascript für IE:

Code: 
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);
Und den Menüpunkt "Über mich" zeichnest du als Link aus:

Code: 
<li><a href="#">Über mich</a>
 
So, das Dropdown läuft jetzt aber ich weiß nicht was ich jetzt ändern muss damit die enger aneinander sind und somit in eine Reihe passen.

Und höher muss das auch noch aber da blicke ich nicht mehr so durch wie vorher.

LG Daniel
 
Dann musst du eben die Breitenangaben verringern, damit die Links näher zusammenrücken.

Mit der Regelerweiterung

Code: 
#navigation {
        padding-right: 0px;
        padding-left: 0px;
        padding-bottom: 30px;
        margin-top: -25px;
        padding-top: 0px;
        z-index:10;
        position:relative;
}
greift auch die von dir gesetzte margin-top-Deklaration, um das Element um 25 Pixel nach oben zu verschieben.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück