Make whole <li> as link with proper HTML <p>I know this has been up a lot of times before, but I couldn't find any solution in my specific case.</p> <p>I've got a navigation bar and I want the whole <code>&lt;li&gt;</code>'s to be "linked" or "clickable" if you will. Now only the <code>&lt;a&gt;</code> (and the <code>&lt;div&gt;</code>'s I've fiddled with) is "clickable".</p> <p>I've tried the <code>li a {display: inner-block; height: 100%; width: 100%}</code> method but the results where just horrible.</p> <p>The source can be found here: <a href="http://jsfiddle.net/prplxr/BrcZK/">http://jsfiddle.net/prplxr/BrcZK/</a></p> <h2>HTML</h2> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;asdf&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="wrapper"&gt; &lt;div id="menu"&gt; &lt;div id="innermenu"&gt; &lt;ul id="menulist"&gt; &lt;li class="menuitem"&gt;&lt;a href="index.php"&gt;&lt;div class="menulink"&gt;Lnk1&lt;/div&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="menuitem"&gt;&lt;a href="index.php"&gt;&lt;div class="menulink"&gt;Lnk2&lt;/div&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="menuitem"&gt;&lt;a href="index.php"&gt;&lt;div class="menulink"&gt;Lnk3&lt;/div&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="menuitem"&gt;&lt;a href="index.php"&gt;&lt;div class="menulink"&gt;Lnk4&lt;/div&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Do anyone have a neat solution to this?</p> <p>Thank you in advance!</p>