zwei colum Raster-Menü für OnePage-Website

Question

Ich möchte eine zweispaltige Raster-Menü wie die diese Website http://prepa.4ltrophy.com/ machen. Kann jemand mir helfen, einen Beispielcode zur Verfügung zu stellen, wie man ein responsives Menü so macht? Ich bin ein kompletter Anfänger und weiß nicht, wo ich anfangen soll. Jede Hilfe von Ihrer Seite wird stark Vielen Dank im Voraus geschätzt

Answer 1

Versuchen Sie, diese

 * { 
 
      margin: 0; 
 
      padding: 0; 
 
      font-family: Segoe UI; 
 
     } 
 
     body { 
 
      background-color: #D8D8D8; 
 
     } 
 
     #grid-menu { 
 
      background-color: rgba(255, 255, 255, 0.74); 
 
      max-width: 285px; 
 
      list-style-type: none; 
 
      position: fixed; 
 
      left: 0; 
 
      height: 100%; 
 
     } 
 
     #grid-menu li { 
 
      padding: 30px; 
 
      float: left; 
 
      text-align: center; 
 
      display: table; 
 
      width: 80px; 
 
      border: 1px solid #fff; 
 
      height: 20%; 
 
      transition: .3s ease-in; 
 
      cursor: pointer; 
 
     } 
 
     #grid-menu li:hover { 
 
      background-color: #aaa; 
 
     } 
 
     #grid-menu li a { 
 
      color: black; 
 
      text-decoration: none; 
 
      font-size: 20px; 
 
      font-weight: 100; 
 
     }

<ul id="grid-menu"> 
 
    <li> 
 
    <a href="#">Home</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">About</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Products</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Contact</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Blog</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">My tab</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">My tab</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">My tab</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">My tab</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">My tab</a> 
 
    </li> 
 
</ul>