Joomla menu items into clickable div's

Question

I'm working on customizing the Joomla menu as a little experiment to see how customizable I can make it. However, now that I've made every menu item into an editable button, I've decided to change them from UL/LI to DIV's.

Now, the thing is, I've been using the default mod_menu, and in there you don't really work with <a href... or anything, and so when I turn the li's into div's, it's only the text within the div that is clickable rather than the entire div.

It looks nice, and it almost does what I want it to do, but main priority is that the entire div containing the one article link acts as a button, that I can click to go to that page.

Does anyone have any idea how to do so?

Answer 1

Just to clarify, do not remove the <a> tag at all as this contains the links href and if removed, you will need to resort to something like jQuery.

So assuming for example you have the following markup for a menu:

<div class="menu">
    <div class="item">
        <a href="#">Home</a>
    </div>
    <div class="item">
        <a href="#">About</a>
    </div>
    <div class="item">
        <a href="#">Contact</a>
    </div>
</div>

Currently the text is the only clickable thing because the <a> tag by default is display: inline;

So all you have to do is use the following CSS:

.menu .item a {
    display: block;
}

This basically extends the element to the full dimensions of it's parent.