Hallo zusammen,
ich bin seit gut vier Stunden am verzweifeln. Ich probiere soeben ein vertikal Accoridion Menü zu bauen, welches bei Mausklick sich jeweils ausklappt. Beispiele von verschiedenen Internetseiten funktionieren, nur wenn ich mich selbstständig dran versuche, möchte er den Reiter nicht aufklappen.
Anbei jeweils der Ausschnitt der HTML Datei und die passende CSS dazu:
Der Validationscheck zeigt an, dass die CSS Datei keinen Fehler beinhaltet.
Ich wäre überglücklich, wenn jemand den Fehler findet. Und eventuell könnte mir jemand erklären, welche Dinge man bei solch einen Menü beachten soll?
VG
CSSar
ich bin seit gut vier Stunden am verzweifeln. Ich probiere soeben ein vertikal Accoridion Menü zu bauen, welches bei Mausklick sich jeweils ausklappt. Beispiele von verschiedenen Internetseiten funktionieren, nur wenn ich mich selbstständig dran versuche, möchte er den Reiter nicht aufklappen.
Anbei jeweils der Ausschnitt der HTML Datei und die passende CSS dazu:
Der Validationscheck zeigt an, dass die CSS Datei keinen Fehler beinhaltet.
HTML:
<nav id="navmenu">
<ul>
<li class="one"><a class="title" href="#account">Account</a>
<ul class="submenu">
<li><a class="subtitle" href="#">Accounts</a></li>
</ul>
</li>
<li class="two"><a class="title" href="#kundendaten">Kundendaten</a>
<ul class="submenu">
<li><a class="subtitle" href="#">Kunden</a></li>
</ul>
</li>
</ul>
</nav>
Code:
nav#navmenu{
width: 220px;
background-color: #61248D;
margin-top: 50px;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
padding-bottom: 20px;
padding-right: 10px;
padding-left: 10px;
padding-top: 20px;
}
nav ul,
nav li,
nav a{
margin: 0;
padding: 0;
list-style: none;
}
nav ul li{
border-bottom: 1px dotted #ffffff;
border-top: 1px dotted #ffffff;
}
nav ul li:hover{
position: relative;
background-image: url(../images/arrow.png);
background-position: 5px 50%;
background-repeat: no-repeat;
}
nav ul li:first-child{
border-bottom: none;
}
nav ul ul li{
border: none;
}
nav ul ul li:hover{
border: none;
background-color: #FF009D;
}
nav ul a{
position: relative;
display: block;
color: white;
font-size: 12px;
text-transform: uppercase;
text-decoration: none;
padding-left: 30px;
padding-bottom: 2px;
padding-top: 2px;
}
nav li > .submenu{
height: 0px;
overflow: hidden;
}
nav li:target > .submenu{
height: 100px;
}Ich wäre überglücklich, wenn jemand den Fehler findet. Und eventuell könnte mir jemand erklären, welche Dinge man bei solch einen Menü beachten soll?
VG
CSSar
