Hallo Community!
Bin total verzweifelt. Ich habe eine horizontale Navigation erstellt, die aus 5 Bildern besteht. Diese ist mittig ausgerichtet, was soweit auch super funktioniert.
Nun kommt mein Problem. Ich möchte gerne, wenn ich mit dem Cursor über eines dieser Bilder (speziell Galerie) fahre, dass darunter weitere Navigationspunkte (navifeld.png) in der vertikalen erscheinen, wo dann die Namen der Galerien drauf stehen. Aber ich kriege es einfach nicht gebacken...
(Für bessere Verständnis, habe ich mal die Bilder im Anhang hinzugefügt)
Hier der jetzige Quellcode:
Bin total verzweifelt. Ich habe eine horizontale Navigation erstellt, die aus 5 Bildern besteht. Diese ist mittig ausgerichtet, was soweit auch super funktioniert.
Nun kommt mein Problem. Ich möchte gerne, wenn ich mit dem Cursor über eines dieser Bilder (speziell Galerie) fahre, dass darunter weitere Navigationspunkte (navifeld.png) in der vertikalen erscheinen, wo dann die Namen der Galerien drauf stehen. Aber ich kriege es einfach nicht gebacken...
(Für bessere Verständnis, habe ich mal die Bilder im Anhang hinzugefügt)
Hier der jetzige Quellcode:
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Navi Test</title>
<style type="text/css">
a {
text-decoration:none;
}
#navi {
margin:0px;
padding:0px;
list-style:none;
}
#navi li {
float:left;
height:50px;
margin:0px;
width:181px;
position:relative;
}
#navidiv {
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
text-align:center;
max-width:905px;
}
</style>
</head>
<body>
<div id="navidiv">
<ul id="navi">
<li>
<a href="#"><img src="home.png"></a>
</li>
<li>
<a href="#"><img src="galerie.png"></a>
</li>
<li>
<a href="#"><img src="uebermich.png"></a>
</li>
<li>
<a href="#"><img src="gaestebuch.png"></a>
</li>
<li>
<a href="#"><img src="impressum.png"></a>
</li>
</ul>
</div>
</body>
</html>
