CSS-Menü will einfach nicht aufklappen.

html-learner · 18 November 2009

Hallo,

seit einiger Zeit arbeite ich an einer Homepage.
Jedoch schaffe ich es einfach nicht, das sich das Menü bei einem Mouseover aufklappt..

Code:

#nav {
width: 900px;
height: 30px;
list-style: none;
margin: auto;
margin-top: 2px;
padding: 0;
text-align: center;
}


#nav li {
float: left;
}


#home a{
display: block;
background-image: url('../img/button/home.gif');
width: 120px;
height: 30px;
text-decoration: none;
}

#home a:hover {
background-image: url('../img/button/homeover.gif');
}

#aktuell a{
display: block;
background-image: url('../img/button/aktuell.gif');
width: 120px;
height: 30px;
text-decoration: none;
}

#aktuell a:hover {
background-image: url('../img/button/aktuellover.gif');

}

#termin a {
background-image: url('../img/button/termine.gif');
width: 120px;
height: 30px;
text-decoration: none;
display: none;
}

#termin a:hover {
display: block;
background-image: url(../img/button/termineover.gif');
}

#training a {
background-image: url('../img/button/training.gif');
width: 120px;
height: 30px;
text-decoration: none;
display: none;
}

#training a:hover {
display:block;
background-image: url(../img/button/trainingover.gif');
}

#verein a {
background-image: url('../img/button/verein.gif');
width: 120px;
height: 30px;
text-decoration: none;
display: block;
}

#verein a:hover {
background-image: url('../img/button/vereinover.gif');
}

#historie a {
background-image: url('../img/button/historie.gif');
width: 120px;
height: 30px;
text-decoration: none;
display: none;
}

#historie a:hover {
background-image: url('../img/button/historieover.gif');
display:block;
}

#satzung a {
background-image: url('../img/button/satzung.gif');
width: 120px;
height: 30px;
text-decoration: none;
display: none;
}

#satzung a:hover {
background-image: url('../img/button/satzungover.gif');
display:block;
}

#beitreten a {
background-image: url('../img/button/beitreten.gif');
width: 120px;
height: 30px;
text-decoration: none;
display: none;
}

#beitreten a:hover {
background-image: url('../img/button/beitretenover.gif');
display: block;
}

#team a {
background-image: url('../img/button/team.gif');
width: 120px;
height: 30px;
text-decoration: none;
display: block;
}

#team a:hover {
background-image: url('../img/button/teamover.gif');
}

#galerie a {
background-image: url('../img/button/galerie.gif');
width: 120px;
height: 30px;
text-decoration: none;
display: block;
}

#galerie a:hover {
background-image: url('../img/button/galerieover.gif');
}

#anfahrt a {
background-image: url('../img/button/anfahrt.gif');
width: 120px;
height: 30px;
text-decoration: none;
display: block;
}

#anfahrt a:hover {
background-image: url(../img/button/anfahrtover.gif');
}

#impressum a {
background-image: url('../img/button/impressum.gif');
width: 180px;
height: 30px;
text-decoration: none;
display: block;
}

#impressum a:hover {
background-image: url('../img/button/impressumover.gif');
}

HTML:

<body>

<div id="header">


<div id="logo">
</div>

<div id="smallinfo">
&nbsp;<br />
&nbsp;<br />
&nbsp;Besucher: 10263<br />
&nbsp;Monat: 121<br />
&nbsp;Heute: 13<br />
&nbsp;Seitenaufrufe: 28103<br />
</div>
</div>

<ul id="nav">
	<li id="home"><a href="#">&nbsp;</a></li>
	<li id="aktuell"><a href="#">&nbsp;</a>
		<ul id="termin"><a href="#">&nbsp;</a></ul>
		<ul id="training"><a href="#">&nbsp;</a></ul>
	</li>
	
	<li id="verein"><a href="#">&nbsp;</a>
			<ul id="historie"><a href="#">&nbsp;</a></ul>
			<ul id="satzung"><a href="#">&nbsp;</a></ul>
			<ul id="beitreten"><a href="#">&nbsp;</a></ul>
	</li>
	
	<li id="team"><a href="#">&nbsp;</a></li>
	<li id="galerie"><a href="#">&nbsp;</a></li>
	<li id="anfahrt"><a href="#">&nbsp;</a></li>
	<li id="impressum"><a href="#">&nbsp;</a></li>
</ul>

Wie schaff ich es nun bei einem Hover das Menü zum aufklappen zu bringen?
Und wie bring ich dem Internet Explorer bei Xp die Hover-Funktion bei?
Gibt es i-eine Möglichkeit die a:hover-bilder schon beim aufrufen der seite zu laden, ohne sie i-wo versteckt einzubauen?->also das warten bei einem Mouseover von Bild A zu bild A:hover soll raus. ?

Ich hoffe ich hab mich einigermaßen verständlich ausgedrückt (:

LG Flo

prm · 18 November 2009

Geh mal streng nach dieser Anleitung vor, dann sollte es auch im IE klappen: Horizontales Dropdown-Menü

Die Formatierung mit deinen Grafiken kannst du dann ja anschließend individuell deinen Bedürfnissen entsprechend anpassen.

CSS-Menü will einfach nicht aufklappen.

html-learner

Neues Mitglied

prm

Aktives Mitglied

Neueste Beiträge