title: wrap anchor tag around li element
body: <p>I am creating navigation menu. I want to use css so that anchor tag is wrapped around li element but anchor tags are inside li element.</p>
  
  <p>Here is html</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;a href=""&gt;Uutiset&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Foorumi&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Kauppa&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Messut&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Asiakaspalvelu&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Nakoislehti&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Nae meidat&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>here is my less css</p>
  
  <pre><code>ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    li {
      padding: 2% 4%;
      border: 1px solid green;
      a {
          text-decoration: none;
          display: block;
      }
    }
  }
  </code></pre>