Hallo! Die Site "[Wentzell.eu](http://wentzell.eu/)" sieht auf dem (meinem) Smartphone (S6) recht ordentlich aus. Nur die Navigation verrutscht. ~~~HTML `<nav> <ul> <li><a href="#">Startseite</a></li> <li> <a href="#">Blog</a> <ul> <li><a href="#">Reisen</a></li> <li><a href="#">Fotografieren</a></li> </ul> </li> <li><a href="#">Über mich</a></li> <li><a href="#">Kontakt</a></li> </ul> </nav> ~~~ ` ~~~CSS html {background:#000;} body { margin: 1em auto; max-width: 60em; font-family: sans-serif; color: #333333; display: grid; grid-template-columns: 1fr 4fr 1fr; } header, nav, main, article, section, aside, footer { /*border-radius: 0px 0.5em 0.5em; border: 1px solid;*/ padding: .5em; /*margin: .3em;*/ } header { background: #F1F3F4; border-color: #d5d5d5; grid-column: 1 / 7; grid-row: 1 / 2; } /* Navigation */ nav ul { list-style-type: none; margin:0; padding:0; } nav ul li { float: left; position: relative; } nav li a { display: block; width: 100px; color: black; text-align: center; background-color: #FF4000; padding: 0.2em 0.6em; text-decoration: none; border: 1px solid #000; border-bottom: 2px solid #000; border-left:1px solid #000; border-right: 1px solid #000; border-top-right-radius:12px; border-top-left-radius:12px; } nav li a:hover { background-color: silver; border: 1px solid: darkgray; /*border-bottom: 4px solid green;*/ /*border-right: 4px solid green;*/ } nav ul li ul { display: none; position: absolute; /* Damit der folgenden Inhalt nicht nach unten rückt */ } nav ul li:hover ul { display: block; } nav ul li:hover ul a { display: block; width: 100px; color: black; text-align: center; background-color: antiquewhite; padding: 0.2em 0.6em; text-decoration: none; border: 1px solid lightgray; /* border-bottom: 1px solid blue; border-right: 1px solid blue;*/ } nav ul li ul li a:hover { background-color: silver; border: 1px solid: black; border-bottom: 1px solid black; border-right: 1px solid black; border-left: 1px solid black; } nav { background: #fffbf0; border-color: #e7c157; grid-column: 1 / 7; grid-row: 2 / span 2; } ~~~ Kann mir jemand Hinweise geben, damit die Nav-Punkte untereinander, die Unterpunkte daneben erscheinen. Karl-Heinz

Hallo! Die Site "Wentzell.eu" sieht auf dem (meinem) Smartphone (S6) recht ordentlich aus. Nur die Navigation verrutscht. ~~~HTML `<nav> <ul> <li><a href="#">Startseite</a></li> <li> <a href="#">Blog</a> <ul> <li><a href="#">Reisen</a></li> <li><a href="#">Fotografieren</a></li> </ul> </li> <li><a href="#">Über mich</a></li> <li><a href="#">Kontakt</a></li> </ul> </nav> ~~~ ` ~~~CSS html {background:#000;} body { margin: 1em auto; max-width: 60em; font-family: sans-serif; color: #333333; display: grid; grid-template-columns: 1fr 4fr 1fr; } header, nav, main, article, section, aside, footer { /*border-radius: 0px 0.5em 0.5em; border: 1px solid;*/ padding: .5em; /*margin: .3em;*/ } header { background: #F1F3F4; border-color: #d5d5d5; grid-column: 1 / 7; grid-row: 1 / 2; } /* Navigation */ nav ul { list-style-type: none; margin:0; padding:0; } nav ul li { float: left; position: relative; } nav li a { display: block; width: 100px; color: black; text-align: center; background-color: #FF4000; padding: 0.2em 0.6em; text-decoration: none; border: 1px solid #000; border-bottom: 2px solid #000; border-left:1px solid #000; border-right: 1px solid #000; border-top-right-radius:12px; border-top-left-radius:12px; } nav li a:hover { background-color: silver; border: 1px solid: darkgray; /*border-bottom: 4px solid green;*/ /*border-right: 4px solid green;*/ } nav ul li ul { display: none; position: absolute; /* Damit der folgenden Inhalt nicht nach unten rückt */ } nav ul li:hover ul { display: block; } nav ul li:hover ul a { display: block; width: 100px; color: black; text-align: center; background-color: antiquewhite; padding: 0.2em 0.6em; text-decoration: none; border: 1px solid lightgray; /* border-bottom: 1px solid blue; border-right: 1px solid blue;*/ } nav ul li ul li a:hover { background-color: silver; border: 1px solid: black; border-bottom: 1px solid black; border-right: 1px solid black; border-left: 1px solid black; } nav { background: #fffbf0; border-color: #e7c157; grid-column: 1 / 7; grid-row: 2 / span 2; } ~~~ Kann mir jemand Hinweise geben, damit die Nav-Punkte untereinander, die Unterpunkte daneben erscheinen. Karl-Heinz