Navigation mit GRID

[LAW-Web]

Hallo! Die Site "Wentzell.eu" sieht auf dem (meinem) Smartphone (S6) recht ordentlich aus. Nur die Navigation verrutscht.

`<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>

`

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

[Gunnar Bittersmann]

@@LAW-Web

Die Site Wentzell.eu …

… verlinkst du das nächste Mal bitte selber. Du bist doch nicht zum ersten Mal hier.

LLAP 🖖

[Matthias Scharwies]

Servus!

Kann mir jemand Hinweise geben, damit die Nav-Punkte untereinander, die Unterpunkte daneben erscheinen.

Du verwendest für die Liste innerhalb von nav im Augenblick

      nav ul li {
	    float: left;
	    position: relative;
      }

Entweder regelst du das klassisch mit display: inline bzw. display: block oder du machst nav ul zu einem Grid, dass dann den verfügbaren Raum automatisch auf die verfügbaren li-Elemente verteilt.

Herzliche Grüße

Matthias Scharwies

[Mitleser]

Die Site "Wentzell.eu" sieht auf dem (meinem) Smartphone (S6) recht ordentlich aus.

Nicht persönlich nehmen bitte: m.E. sieht es ästhetisch unattraktiv aus.

[LAW-Web]

Ich respektiere Meinungen aller Art und bin für alle Hinweise dankbar Karl-Heinz