title: How to create a button link on navigation bar in CSS3?
body: <p>When I tried to create a button on which I have a link embedded with the functionality of you clicking the button even if it's outside of the exact string on navigation bar using HTML5 and CSS3, I can't create what I hoped. What am I missing on the following code?</p>
  
  <p>HTML file</p>
  
  <pre><code>&lt;nav&gt;
       &lt;ul id='main_menu'&gt; 
          &lt;li&gt;&lt;a href='/'&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='/l1'&gt;Link1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='/l2'&gt;Link2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='/l3'&gt;Link3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>and, CSS file</p>
  
  <pre><code>ul#main_menu li{
  display: inline-block;
  background-color: red;
  border: 5px solid;
  list-style: none;
  padding: 3px;
  border-radius: 5px 5px;
  }
  </code></pre>
  
  <p>When I opened my browser and accessed to it, the result is a crappy button, with no functionality of clicking outside of the string. How can it be feasible?</p>
  
  <p>Thanks.</p>