Hallo zusammen,
bin neu hier im Forum und Anfänger in Sachen html5 und css. Ich arbeite gerade an einer studentischen Arbeit. Brauche hierzu ein Dropdown Menü innerhalb eines Dropdown Menüs.
Bin schon dazu gekommen:
der html code:
<header>
<a href="#" class="logo">mechanik.square7.ch</a>
<nav>
<ul>
<!-- Pro <li> an "STELLE 1" in stlye.css +50px addieren -->
<li><a class="db-toggle db-open" href="#db-open">Link 1</a></li>
<li><a class="db-toggle db-closed" href="#db-closed">Link 1</a>
<ul>
<li><a href="#Unterkapitel 1.1">Unterkapitel 1.1</a></li>
<li><a href="#Unterkapitel 1.2">Unterkapitel 1.2</a></li>
<li><a href="#Unterkapitel 1.3">Unterkapitel 1.3</a></li>
<li><a href="#Unterkapitel 1.4">Unterkapitel 1.4</a></li>
</ul>
</li>
<li><a href="#Kapitel 2">Link 2</a></li>
<li><a href="#Kapitel 3">Link 3</a></li>
<li><a href="#Kapitel 4">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 8</a></li>
</ul>
</nav>
<a class="nav-toggle nav-open" href="#nav-open">☰</a>
<a class="nav-toggle nav-closed" href="#nav-closed">☰</a>
</header>
css Code:
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
header {
width: 100%;
float: left;
background: grey;
}
p {
padding-top: 10px;
}
.logo {
display: block;
width: 100%;
padding: 16px;
text-decoration: none;
color: black;
position: fixed;
background: chocolate;
}
nav {
width: 100%;
float: left;
background: orange;
height: 0;
overflow: hidden;
transition: height .2s ease-in-out;
}
div.Kapitel {
margin-top: 60px;
padding-left: 10px;
padding-right: 10px;
}
nav li {
float: left;
width: 100%;
}
nav a {
display: block;
height: 100%;
width: 100%;
padding: 16px;
text-decoration: none;
color: black;
border-top: 1px solid rgba(0, 0, 0, 0.2);
}
nav a:hover {
background: rgba(0, 0, 0, 0.2);
}
.nav-toggle {
background: rgba(0, 0, 0, 0.2);
display: block;
position: fixed;
right: 0;
top: 0;
padding: 14px;
color: black;
cursor: pointer;
text-decoration: none;
}
div.content {
padding-top: 0.1px;
}
.nav-toggle:hover {
background: rgba(0, 0, 0, 0.4);
}
#nav-open:target .nav-closed {
display: block;
}
.nav-closed,
#nav-closed:target .nav-closed,
#nav-open:target .nav-open {
display: none;
}
/* Aufzählungszeichen im Text */
div.content li {
list-style: inside;
margin-left: 10px;
}
@media screen and (max-width: 500px) {
#nav-open:target nav {
height: auto;
/* oder in Pixelgröße? */
}
nav {
padding-top: 50px;
}
/* Unterkapitel */
nav ul li ul {
text-align: left;
margin-left: 15px;
}
@media screen and (min-width:501px) {
.nav-toggle {
display: none !important;
}
header {
position: fixed;
}
.logo {
width: 100%;
float: left;
}
nav {
float: left;
display: block !important;
height: 100%;
list-style-type: none;
margin: 0;
margin-top: 50px;
padding: 0;
width: 15%;
background-color: orange;
position: fixed;
overflow: auto;
box-shadow: 1px 1px 1px 1px grey;
}
nav li {
width: 100%;
padding: 0;
}
div.content {
margin-left: 15%;
padding-right: 15%;
}
}
Hätte gerne dass die Unterkapitel durch klicken auf z.B. "Kapitel 1" nach unten aufklappen und wieder schließen. Das ganze soll auch ohne javascript geschehen. Was muss ich der css Datei dazufügen sodass es funktioniert?
Danke im Vorraus,
student124