nicht angemeldet
Aufklappliste/Auswahlliste mit CSS
Hallo,
ich habe mir eine Auswahlliste (ähnlich select) mit CSS gebastelt. Die Auswahlliste soll eine bestimmte Anzahl von verlinkten Dokumenten bereitstellen. Klappt eigentlich wie gedacht. Hat jemand Verbesserungsvorschläge? Oder findet jemand einen Fehler?
<!doctype html>
<html lang="de">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="utf-8">
<title>Auswahlliste</title>
<style type="text/css">
article {
font-family: Arial;
width: 60%;
background-color: gainsboro;
margin: 0 auto 0;
padding-bottom: 10px;
}
aside {
width: 95%;
background-color: palegreen;
font-size: 90%;
margin: 10px auto 10px;
cursor: wait;
padding: 0 5px 0 10px;
border: 1px solid black;
}
aside a {
display: block;
margin-right: 5px;
}
aside a:hover {
background-color: gold;
}
aside ol li {
width: 100%;
}
aside ol {
position: absolute;
top: -9999px;
left: -9999px;
background: pink;
border: 1px solid black;
margin: 0 5px 10px 0;
}
aside ol li a {
padding: 2px 10px 2px 5px;
}
aside:hover > ol {
position: relative;
top: 100%;
left: 0;
}
</style>
</head>
<body>
<article>
<header>
<h1>01 Erster Abschnitt</h1>
</header>
<aside>
Bitte eine Auswahl treffen:
<ol>
<li><a href="#">Dokument 1</a></li>
<li><a href="#">Dokument 2</a></li>
<li><a href="#">Dokument 3</a></li>
<li><a href="#">Dokument 4</a></li>
<li><a href="#">Dokument 5</a></li>
<li><a href="#">Dokument 6</a></li>
<li><a href="#">Dokument 7</a></li>
<li><a href="#">Dokument 8</a></li>
<li><a href="#">Dokument 9</a></li>
<li><a href="#">Dokument 10</a></li>
<li><a href="#">Dokument 11 - es gibt auch sehr lange Dokumentennamen - es gibt auch sehr lange Dokumentennamen - es gibt auch sehr lange Dokumentennamen - es gibt auch sehr lange Dokumentennamen - es gibt auch sehr lange Dokumentennamen - es gibt auch sehr lange Dokumentennamen - es gibt auch sehr lange Dokumentennamen</a></li>
<li><a href="#">Dokument 12</a></li>
<li><a href="#">Dokument 13</a></li>
<li><a href="#">Dokument 14</a></li>
<li><a href="#">Dokument 15</a></li>
<li><a href="#">Dokument 16</a></li>
<li><a href="#">Dokument 17</a></li>
<li><a href="#">Dokument 18</a></li>
<li><a href="#">Dokument 19</a></li>
<li><a href="#">Dokument 20</a></li>
</ol>
</aside>
</article>
</body>
</html>
MfG
pixxma