<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Menu styling</title>
   <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="menu-wrapper">
   <header>
      <h1>Menu styling</h1>
      <p>Same structure different styling</p>
   </header>

   <h3>Menu 1</h3>
   <nav class="menu-one">
      <ul>
         <li class="active"><a href="">Home</a></li>
         <li><a href="">Articles</a></li>
         <li><a href="">About</a></li>
         <li><a href="">Contact</a></li>
      </ul>
   </nav>

   <h3>Menu 2</h3>
   <nav class="menu-two">
      <ul>
         <li><a href="">Home</a></li>
         <li><a href="">Articles</a></li>
         <li class="active"><a href="">About</a></li>
         <li><a href="">Contact</a></li>
      </ul>
   </nav>

   <h3>Menu 3</h3>
   <nav class="menu-three">
      <ul>
         <li><a href="">Home</a></li>
         <li><a href="">Articles</a></li>
         <li class="active"><a href="">About</a></li>
         <li><a href="">Contact</a></li>
      </ul>
   </nav>

   <h3>Menu 4</h3>
   <nav class="menu-four">
      <ul>
         <li><a href="">Home</a></li>
         <li><a href="">Articles</a></li>
         <li><a href="">About</a></li>
         <li class="active"><a href="">Contact</a></li>
      </ul>
   </nav>

   <h3>Menu 5</h3>
   <nav class="menu-five">
      <ul>
         <li><a href="">Home</a></li>
         <li class="active"><a href="">Articles</a></li>
         <li><a href="">About</a></li>
         <li><a href="">Contact</a></li>
      </ul>
   </nav>

   <h3>Menu 6</h3>   
   <nav class="menu-six">
      <ul>
         <li><a href="">Home</a></li>
         <li><a href="">Articles</a></li>
         <li class="active"><a href="">About</a></li>
         <li><a href="">Contact</a></li>
      </ul>
   </nav>

   <h3>Menu 7</h3>
   <nav class="menu-seven">
      <ul>
         <li><a href="">Home</a></li>
         <li><a href="">Articles</a></li>
         <li><a href="">About</a></li>
         <li class="active"><a href="">Contact</a></li>
      </ul>
   </nav>

   <h3>Menu 8</h3>
   <nav class="menu-eight">
      <ul>
         <li class="active"><a href="">Home</a></li>
         <li><a href="">Articles</a></li>
         <li><a href="">About</a></li>
         <li><a href="">Contact</a></li>
      </ul>
   </nav>

   <h3>Menu 9</h3>
   <nav class="menu-nine">
      <ul>
         <li><a href="">Home</a></li>
         <li class="active"><a href="">Articles</a></li>
         <li><a href="">About</a></li>
         <li><a href="">Contact</a></li>
      </ul>
   </nav>

   <h3>Menu 10</h3>
   <nav class="menu-ten">
      <ul>
         <li><a href="">Home</a></li>
         <li class="active"><a href="">Articles</a></li>
         <li><a href="">About</a></li>
         <li><a href="">Contact</a></li>
      </ul>
   </nav>

   <h3>Menu 11</h3>
   <nav class="menu-eleven">
      <ul>
         <li class="active"><a href="">Home</a></li>
         <li><a href="">Articles</a></li>
         <li><a href="">About</a></li>
         <li><a href="">Contact</a></li>
      </ul>
   </nav>   
</div>
   
</body>
</html>