ここは僕の冷蔵庫。後はあれして食べるだけ。

I love the frozen FOOD.

小細工です。

たとえば、下記のような ul / li の項目があったとしましょうか。

<ul class="category">
 <li><a href="/wp/category/column/">コラム</a></li>
 <li><a href="/wp/category/it/">IT</a></li>
 <li><a href="/wp/category/it/programing/">プログラミング</a></li>
 :
</ul>

CSSを組んで、下記のようなイメージとなりましたと。
※今回はcssはあまり関係ないので、割愛します。

https://www.nemuizo.com/wp/wp-content/uploads/2014/10/li001.png

コラムの文字をクリックすれば、コラムのページへ飛ぶ感じです。

さてさて、aがブロック要素かなにかでwidth:100%になっていれば、「コラムの端っこ」をクリックしても、コラムのページへ飛びますよね。

https://www.nemuizo.com/wp/wp-content/uploads/2014/10/li002.png

今回は、デザインの関係で、aをブロック要素にしてなかったシチュエーションを考えます。

jQueryによる解決

オーソドックスな解決法です。
jQueryで、こんなソースを書きます。

$(function() {
 $('ul.category li').click( function() {
    window.location.href = $(this).children('a').attr('href');
 });

また、hoverを使えば、マウスオーバー時に背景を変えることもできますよ。

 $('ul.category li').hover (
    function() {
        $(this).css("background-color","#fafafa");
    },
    function() {
        $(this).css("background-color","transparent");
    }
 );

ものすごく安直な対応ですけども、