Probleme mit Dropdown-Menü

  • Hey Community,

    Ich habe ein Problem! Seit Tagen versuche ich ein Dropdown-Menü in meine Website einzufügen. Der html Teil ist ja nicht schwer aber ich bekomme es mit css nicht hin. Ich hab so gut wie gar kein Plan von programmieren, trotzdem habe ich Spaß daran und es frustriert mich, dass ich es nicht hinbekomme. Auch "meine" Website habe ich nur mit Hilfe eines Youtubetutorials programmiert. Es wäre mega cool, wenn sich jemand der sich damit auskennt kurz drüber schaut und mir sagt, wie es richtig einzubauen ist.


    Viele Grüße

    Hagen

    css1.pngcss2.pngcss3.pnghtml1.pnghtml2.png,

  • kannst du mal ein Link posten oder den Code in Text und nicht als Bild ? Ich kann auf meinen Monitor nix erkennen weil er zu klein ist.

    Kann zwar was sehen was ich dann zusammen reimen kann , doch wenn da irgendwo ein Fehler ist , das kann man dann nicht sehen und auch nicht testen.

    Deshalb bitte Link oder Code posten

  • Ich stelle Dir mal ein Muster zur Verfügung!


    HTML

    <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Drop down Menu responsive</title> <link rel="stylesheet" href="style.css"> <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> </head> <body> <header> <nav id="normal"> <ul> <li><a href="">Startseite</a></li> <li><a href="">Lifestyle</a></li> <li><a href="">Youtube <i class="fas fa-sort-down"></i></a> <ul> <li><a href="">Java</a></li> <li><a href="">HTML</a></li> <li><a href="">CSS</a></li> </ul> </li> <li><a href="">Web</a></li> <li><a href="">Kontakt</a></li> <li><a href="">Doku</a></li> </ul> </nav> <nav id="mobile"> <div id=menu>Menü</div> <ul> <li><a href="">Startseite</a></li> <li><a href="">Lifestyle</a></li> <li><a href="">Youtube <i class="fas fa-sort-down"></i></a> <ul> <li><a href="">Java</a></li> <li><a href="">HTML</a></li> <li><a href="">CSS</a></li> </ul> </li> <li><a href="">Web</a></li> <li><a href="">Kontakt</a></li> <li><a href="">Doku</a></li> </ul> </nav> </header> </body> </html>


    CSS

    body, html { background: #1c1c22; margin: 0; padding: 0; font-size: 62.5%; } @media screen and (max-width: 600px) { html { font-size: 48%; } } @media screen and (min-width: 600px) { html { font-size: 53%; } } @media screen and (min-width: 800px) { html { font-size: 57%; } } @media screen and (min-width: 1200px) { html { font-size: 70%; } } header { background: #2a2a35; width: 100%; height: 70px; height: 7rem; top: 0; text-align: left; transition: all 200ms; } header nav#normal { color: red; display: inline-block; } @media screen and (max-width: 950px){ header nav#normal{ display: none; } } header nav#normal ul{ margin: 0; padding: 0; transition: all 300ms; display: inline-block; } header nav#normal ul li{ margin: 0; padding: 0; float: left; list-style: none; position: relative; transition: all 300ms; } header nav#normal ul li a { display: inline-block; padding: 2.17rem; float: left; min-width: 12rem; text-align: center; font-size: 2rem; color: #fff; margin: 0 3px 0 0; text-decoration: none; background: #c8354e; font-weight: 300; transition: all 300ms; font-family: 'Roboto', sans-serif; } header nav#normal ul li:hover > a { background: #8c1e31; } header nav#normal ul li ul { overflow: hidden; position: absolute; top: 100%; left: 0; width: 100%; transition: all 300ms; max-height: 0; } header nav#normal ul li:hover > ul { max-height: 700px; } header nav#normal ul li ul li { border-bottom: 1px solid #8c1e31; } header nav#mobile { color: #c8345e; display: none; } @media screen and (max-width: 950px){ header nav#mobile { display: block; } } header nav #menu { padding: 2.17rem 5% 2.17rem 5%; float: left; width: 90%; text-align: center; font-size: 2rem; color: #fff; cursor: pointer; font-weight: 300; transition: 500ms all; font-family: 'Roboto', sans-serif; } header nav#mobile ul { width: 100%; margin: 0; padding: 0; max-height: 0; transition: all 500ms; overflow: hidden; float: left; } header nav#mobile:hover > ul { max-height: 800px; } header nav#mobile ul li { margin: 0; padding: 0; float: left; width: 100%; list-style: none; position: relative; transition: all 500ms; } header nav#mobile ul li a { display: inline-block; padding: 2.17rem 5% 2.17rem 5%; float: left; min-width: 12rem; width: 90%; text-align: center; font-size: 2rem; color: #fff; text-decoration: none; background: #c8354e; font-weight: 300; transition: all 500ms; font-family: 'Roboto', sans-serif; } header nav#mobile ul li:hover > a { background: #8c1e31; } header nav#mobile ul li ul { width: 100%; transition: all 500ms; max-height: 0; overflow: hidden; float: left; } header nav#mobile ul li ul li { display: block; float: left; background: #8c1e31; transition: all 500ms; } header nav#mobile ul li ul li a { background: #8c1e31; } header nav#mobile ul li:hover ul { max-height: 500px; }