Folgendes HTML:
HTML-Code:
<div id="dropdown">
<ul>
<li><a class="clicked" href="Beispiel.htm">Beispiel</a>
<ul>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
</ul>
</li>
<li><a href="Beispiel.htm">Beispiel</a>
<ul>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
</ul>
</li>
<li><a href="Beispiel.htm">Beispiel</a>
<ul>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
</ul>
</li>
<li><a href="Beispiel.htm">Beispiel</a>
<ul>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
</ul>
</li>
<li><a href="Beispiel.htm">Beispiel</a>
<ul>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
</ul>
</li>
<li><a href="Beispiel.htm">Beispiel</a>
<ul>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
</ul>
</li>
</ul>
</div>
Folgendes CSS:
Code:
#dropdown ul {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
}
#dropdown ul li {
position: relative;
float: left;
}
#dropdown li ul {
position: absolute;
top: 100%;
display: none;
}
/* Styles for Menu Items */
#dropdown ul li a {
display: block;
padding: 0.2cm;
background-color: #000032;
}
#dropdown ul li a:hover {
background-color: white;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
#dropdown li:hover ul { display: block; } /* The magic */
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
#dropdown li:hover ul { display: block; } /* The magic */
a.clicked {
text-decoration: none;
color: yellow;
font-weight: bold;
}
a.clicked:hover {
text-decoration: none;
color: #000032;
background-color: yellow;
font-weight: bold;
}
Folgendes Ergebnis:
Unbenannt.png
Folgendes Kommentar:
SCHEISSE! Warum geht der 5te Menüpunkt nicht unter dem ersten (den mit der klasse
sondern erst danach weiter?????
DANKE SCHON MAL IM VORAUS!!!
(Hier noch mal das ganze als valide Website, zum ausprobieren
HTML-Code:
<!doctype html>
<html>
<head>
<title>Beispiel</title>
<style>
#dropdown ul {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
}
#dropdown ul li {
position: relative;
float: left;
}
#dropdown li ul {
position: absolute;
top: 100%;
display: none;
}
/* Styles for Menu Items */
#dropdown ul li a {
display: block;
padding: 0.2cm;
background-color: #000032;
}
#dropdown ul li a:hover {
background-color: white;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
#dropdown li:hover ul { display: block; } /* The magic */
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
#dropdown li:hover ul { display: block; } /* The magic */
a.clicked {
text-decoration: none;
color: yellow;
font-weight: bold;
}
a.clicked:hover {
text-decoration: none;
color: #000032;
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<div id="dropdown">
<ul>
<li><a class="clicked" href="Beispiel.htm">Beispiel</a>
<ul>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
</ul>
</li>
<li><a href="Beispiel.htm">Beispiel</a>
<ul>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
</ul>
</li>
<li><a href="Beispiel.htm">Beispiel</a>
<ul>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
</ul>
</li>
<li><a href="Beispiel.htm">Beispiel</a>
<ul>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
</ul>
</li>
<li><a href="Beispiel.htm">Beispiel</a>
<ul>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
</ul>
</li>
<li><a href="Beispiel.htm">Beispiel</a>
<ul>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
<li><a href="Beispiel">Beispiel</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>