Ich weiss nicht wo dein Problem liegt, da ich es mir nicht näher angesehen habe, aber ich gebe dir mal eine Vorlage mit, die funktioniert.
HTML-Code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Simple Menu for all browsers</title>
<style>
/* ungeordnete Liste */
.menu ul{
list-style-type: none; /* Listenpunkte entfernen */
padding: 0; /* Innenabstände entfernen */
margin: 0; /* Aussenabstände entfernen */
font-family: verdana, sans-serif; /* Schrift setzen, wenn gewünscht */
}
/* Listenelemente */
.menu li{
float: left; /* Alle nach Links schieben */
position: relative; /* realtiv positionieren für das Untermenü */
z-index: 100; /* Über andere Elemente erscheinen lassen */
}
/* Links in Listenelementen */
.menu a, .menu:visited {
display: block; /* Als Blockelement formatieren */
font-size: .9em; /* Schriftgrösse bestimmen */
width: 8em; /* Breite vorgeben */
padding: 5px 0 5px 0; /* Innenabstand Rand zur Schrift oben, rechts, unten, links */
color: white; /* Schriftfarbe */
background: black; /* Hintergrundfarbe */
text-decoration: none; /* Unterstrich bei Links entfernen */
margin-right: 1px; /* Abstand zum nächten Menüpunkt festlegen */
text-align: center; /* Schrift zentrieren */
line-height: 1.5em; /* Zeilenhöhe setzen, falls abweichend */
}
/* Mauszeiger über Links*/
.menu a:hover{
color: yellow; /* Schriftfarbe ändern */
}
/* Untermenüpunkte */
.menu ul ul {
visibility: hidden; /* unsichtbar machen */
position: absolute; /* absolut positionieren */
width: 7em; /* Breite festlegen */
}
/* Mauszeiger über Links im Untermenü */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility: visible; /* Untermenü einblenden */
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="./">Punkt 1</a>
<ul>
<li><a href="./">Punkt 1.1</a></li>
<li><a href="./">Punkt 1.2</a></li>
<li><a href="./">Punkt 1.3</a></li>
<li><a href="./">Punkt 1.4</a></li>
</ul>
</li>
<li><a href="./">Punkt 2</a>
<ul>
<li><a href="./">Punkt 2.1</a></li>
<li><a href="./">Punkt 2.2</a></li>
<li><a href="./">Punkt 2.3</a></li>
<li><a href="./">Punkt 2.4</a></li>
</ul>
</li>
<li><a href="./">Punkt 3</a>
<ul>
<li><a href="./">Punkt 3.1</a></li>
<li><a href="./">Punkt 3.2</a></li>
<li><a href="./">Punkt 3.3</a></li>
<li><a href="./">Punkt 3.4</a></li>
</ul>
</li>
<li><a href="./">Punkt 4</a>
<ul>
<li><a href="./">Punkt 4.1</a></li>
<li><a href="./">Punkt 4.2</a></li>
<li><a href="./">Punkt 4.3</a></li>
<li><a href="./">Punkt 4.4</a></li>
</ul>
</li>
<li><a href="./">Punkt 5</a>
<ul>
<li><a href="./">Punkt 5.1</a></li>
<li><a href="./">Punkt 5.2</a></li>
<li><a href="./">Punkt 5.3</a></li>
<li><a href="./">Punkt 5.4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
17.05.2013, 10:50
dropdown menu
Ähnliche Themen
Linear-Darstellung
