Hilfe bei meinem Projekt - diverse Fragen
Hallo,
bisher kam ich wirklich besser voran als ich dachte. Ich weiß, es ist noch nicht viel, aber es ist schon mal ein Anfang. Nun stoße ich (und Google) allerdings bereits an die Grenzen unseres Könnens. Ich poste mal die HTML- und CSS-Code und stelle darunter die Fragen.
Der hier verwendete Code
<!DOCTYPE html>
<html lang="de">
<head>
<link rel="stylesheet" href="/css_webseite/all.min.css">
<title>Menü offen stehen lassen</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
}
html * {
box-sizing: border-box;
}
header {
width: 100%;
padding: 0px;
margin: 0 auto;
height: 100%;
background-color: white;
color: #79B3E5;
text-align: right;
}
nav>ul {
width: 100%;
max-width: 1200px;
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
nav li {
width: 100%;
max-width: 1200px;
border: 1px solid #79B3E5;
border-left: none;
border-right: none;
font-family: Arial;
padding: 0;
font-size: 1.5rem;
flex: 1 1 0%;
}
@media (min-width: 45em) {
nav>ul {
flex-direction: row;
}
nav li {
flex: 1;
font-size: 1em;
}
}
nav a {
display: block;
padding: 0.4em;
text-decoration: none;
font-weight: bold;
text-align: center;
color: #79B3E5;
}
nav li[aria-current] a {
background-color: #79B3E5;
color: white;
font-family: Arial;
}
nav a:focus,
nav a:hover,
nav li[aria-current] a:focus
nav li[aria-current] a:hover {
background-color: #79B3E5;
color: white;
}
nav li[aria-current] a:focus,
nav .submenu li a{
color: #79B3E5;
background-color: white;
}
nav li a:hover,
nav li:hover .submenu {
color: white;
background-color: #79B3E5;
}
nav .submenu li[aria-current] a {
color: white;
background-color: #79B3E5;
}
nav > ul > li {
position: relative;
}
nav .submenu {
position: absolute;
visibility: hidden;
width: 100%;
height: 0;
z-index: 1000;
}
nav .submenu li {
display: block;
border-top: none;
/* width: 15em; */
}
nav li:hover .submenu,
nav li:active .submenu,
nav li:focus .submenu {
visibility: visible;
height: auto;
background-color: white;
border-right: 1px solid #79B3E5;
border-left: 1px solid #79B3E5;
border-top: 1px solid #79B3E5;
}
body * {
box-sizing: border-box;
}
body {
width: 100%;
max-width: 1200px;
padding: 5px;
margin: 0 auto;
height: 100%;
background-color: white;
}
body a,
body a:visited {
color: #79B3E5;
text-decoration: none;
}
p {
font-family: Verdana;
font-size: 16px;
line-height: 115%;
}
nav {
background-color: white;
}
i{
float:right;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li aria-current="Startseite"><a href="Startseite.html">Startseite</a></li>
<li tabindex="0">
<a class="ohnelink">Hypochondrie <i class="fas fa-angle-double-down"></i></a>
<ul class="submenu">
<li tabindex="0"><a href="Hypochondrie.html">Hypochondrie</a></li>
<li tabindex="0"><a href="Symptome.html">Symptome</a></li>
</ul>
</li>
<li> <a href="Zwang.html">Zwangsstörungen</a></li>
<li tabindex="0"> <a>Selbsthilfe<i class="fas fa-angle-double-down"></i></a>
<ul class="submenu">
<li tabindex="0"><a href="Selbsthilfe.html">Selbsthilfe </a></li>
<li tabindex="0"><a href="AutogenesTraining.html">Autogenes Training</a></li>
<li tabindex="0"><a href="ProgressiveMuskelentspannung.html"> Progressive Muskelentspannung</a></li>
</ul>
</li>
<li> <a href="Impressum.html">Impressum</a></li>
</ul>
</nav>
</header>
</body>
</html>