Drop Down mit Menü mit <li> Elementen funktioniet nicht

Amr0d

Erfahrenes Mitglied
Guten Abend,

habe mal wieder ein Problem und zwar habe ich ein mit Photoshop zerschnittenes Layout versucht ein Menü einzubinden bei dem die verschiedenen Punkte bei Mouse over nach unten hin ausfahren. Allerdings verschieben sich die Hauptpunkte die unter dem ausgeklappten Menü sind nicht nach unten sondern bleiben star stehen und überlagern sich somit. Auch würde mich interessieren wie ich es anstelle das der Link Inhalte öffnet die in einem anderen div stehen, und zwar in der Mitte wo ihr das Logo sehen könnt.

Da ich selber nicht viel Javascript kann habe ich ein bereits fertiges genommen, das sogenannte Suckerfish Dropdown onelevel. Eine weitere Frage wäre wie ich die Unterpunkte in der Scrhriftart kleiner gekomme als die Hauptpunkte und warum auf einmal kein Hintergrundbild mehr vorhanden ist obwohl ich eins angegeben habe. Im Internet Explorer funktioniert das leider auch nicht was mein nächstes Problem wäre(IE von Vista)

//edit
Das Hintergrundbild des divs ist online sichtbar, offline wird es bei mir nicht angezeigt.

Ich würde mich um schnelle Aufklärung freuen.

Hier die Quelltexte


Code:
<script type="text/javascript">
 <!-- 
 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>

CSS:

Code:
#nav, #nav ul {
	padding: 0;
	margin: 10px;
	list-style: none;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15pt;
	color: Black;
}

#nav a {
	display: block;
	width: 10em;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15pt;
	color: Black;
}

#nav li {
	float: left;
	width: 10em;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15pt;
	color: Black;
}

#nav li ul {
	position: absolute;
	width: 10em;
	left: -999em;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15pt;
	color: Black;
}

#nav li:hover ul {
	left: auto;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15pt;
	color: Black;
}

#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15pt;
	color: Black;
}

Und zuletzt noch der HTML quelltext:

HTML:
<ul id="nav">
	<li><a href="#">Leistungen</a>
		<ul>
			<li><a href="#">Massage</a></li>
			<li><a href="#">Körperbehandlung</a></li>
			<li><a href="#">Fußpflege</a></li>
			<li><a href="#">Verwöhnkombis</a></li>
		</ul>
	</li>
    <li><a href="#">Aktuelles</a></li>
    <li><a href="#">Produkte</a></li>
    <li><a href="#">Philosophie</a></li>
    <li><a href="#">Kontakt</a></li>
</ul>

Die komplette Seite sieht so aus: Link
 
Zuletzt bearbeitet:
Hi,

das vertikale "Suckerfish Dropdown-Menu" funktioniert auf eine ganz andere Weise -> http://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html

Dass sich die Hauptmenüpunkte nicht nach unten verschieben, liegt nämlich daran, dass das Submenü absolut positioniert ist, und somit aus dem normalen Textfluss genommen wurde.

Von daher empfehle ich dir:

Auch würde mich interessieren wie ich es anstelle das der Link Inhalte öffnet die in einem anderen div stehen
Entweder bindest du dort einen iFrame ein, um darin die Seiten zu laden, oder du setzt eine serverseitige Scriptsprache, wie z.B. PHP, ein, um die Inhalte in dem DIV zu tauschen.

Eine weitere Frage wäre wie ich die Unterpunkte in der Scrhriftart kleiner gekomme als die Hauptpunkte
Code:
#nav ul li a { font-size:10pt; }
 
Zurück