title: Hexagon Menu made in CSS and HTML
body: <p>I'm try to make a hexagon menu to look like this. but I have some trouble.</p>
  
  <ol>
  <li>Keep it responsive.</li>
  <li>Let them contain text.</li>
  <li>The borders.</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/Op60Z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Op60Z.png" alt="enter image description here"></a></p>
  
  <p>I have make this code, but it don't work so well when it come to contain text or borders.</p>
  
  <p>The CSS</p>
  
  <pre><code>ol.even {
    position: relative;
    left: 5.45455rem;
  }
  
  ol.odd {
    position: relative;
    margin-bottom: -4.5%;
  }
  
  .hex {
    position: relative;
    margin: 1em auto;
    width: 6rem;
    height: 10.2rem;
    background: #1e2530;
    transform: rotate(-90deg);
    display: inline-block;
    list-style-type: none;
    margin-right: 4.61538rem;
    transition: all 150ms ease-in-out;
    z-index: 2;
  }
  
  .hex:before, .hex:after {
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: inherit;
    content: '';
    z-index: -1;
  }
  
  .hex:before {
    transform: rotate(60deg);
  }
  
  .hex:after {
    transform: rotate(-60deg);
  }
  
  .hex:hover {
    background: #ea7432;
    cursor: pointer;
  }
  </code></pre>
  
  <p>The HTML</p>
  
  <pre><code>&lt;ol class="odd"&gt;
      &lt;li class='hex'&gt;&lt;/li&gt;
      &lt;li class='hex'&gt;&lt;/li&gt;
      &lt;li class='hex'&gt;&lt;/li&gt;
      &lt;li class='hex'&gt;&lt;/li&gt;
  &lt;/ol&gt;  
  &lt;ol class="even"&gt;
      &lt;li class='hex'&gt;&lt;/li&gt;
      &lt;li class='hex'&gt;&lt;/li&gt;
      &lt;li class='hex'&gt;&lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p>The result was this. but it can't contain text or borders
  <a href="https://i.stack.imgur.com/SOKLZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SOKLZ.png" alt="enter image description here"></a></p>
  
  <p>What to do so it work like the hexagon menu on the first image?</p>