title: Imposing ul li menu items
body: <p>I want to make an <code>ul li</code> menu and I want to place each li element over previous one. </p>
  
  <p>I don't know if I can explain with words what I mean, so I've made an image showing desired effect:
  <a href="https://i.stack.imgur.com/0f9RA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0f9RA.png" alt="image"></a>
  </p>
  
  <p>How can I do this using plain CSS? Is it possible, or I must use javascript?</p>
  
  <p>This is what I've tried so far:</p>
  
  <pre><code>ul {
      margin: 0;
      padding: 0;
      list-style: none;
  }
  
  li {
      position: relative;
  }
  
  li a {
      display: block;
      position: absolute;
      top: -30px;
      z-index: 1;
      width: 225px;
      height: 115px;
  }
  </code></pre>
  
  <p>but each <code>li</code> appears on the same place over previous one.</p>