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="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <title>Menü offen stehen lassen</title> <head> <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; } /* submenu navigation links */ 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; */ } /** Show the submenu on hover, focus **/ 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> <link rel="stylesheet" href="http://adblockers.opera-mini.net/css_block/default-domainless.css" type="text/css" /> </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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!