CSS make div selectable instead of text?

Question

I have a navigation dropdown element that I would like to make selectable - currently the link only works when the text is hovered and not the box surrounding it. Is there a way in which I can do this in CSS.

My CSS code:

.main-menu {
position: absolute;
top:90px;
right:0px;
text-align: right;
 z-index: 2000;
}

.main-menu ul {
width: 50%;
background-color: #333;
 display: inline;
margin: 0;
padding: 20px 5px;
list-style: none;
color: #fff;
}
.main-menu ul li {
display: inline-block;
margin-right: -10px;
position: relative;
padding: 17px 15px;
cursor: pointer;
color: #fff;
font-size: 14px;
font-weight: 700;
 }
.main-menu ul li a {
color: #fff;
border: none;
}
.main-menu ul li a:hover {
color: #f1c40f;
}
/* sub menu */
.main-menu ul li ul {
position: absolute;
top: 25px;
left: 0;
min-width: 150px;
opacity: 0;
margin: 10px 0px;
padding: 17px 5px 0px 5px;
visibility: hidden;
text-align: left;
}
.main-menu ul li ul li {
display: block;
color: #fff;
margin: 0px -5px;
}
.main-menu ul li ul li:hover {
background: #666;
color: #f1c40f;
}

.main-menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}

Jsfiddle is: http://jsfiddle.net/9BdTK/

Answer 1

I have this on my site, but I also managed to do so from this site.

have a look :

Don't put padding in the 'li' item. Instead set the anchor tag to display:inline-block; and apply padding to it.By Stussa

As said on : Make whole area clickable

Goodluck

Answer 2

Method 1

You can simply move the <a></a> outside of <li>.

E.G:

<a href="#nowhere" title="Home"><li>Home</li></a>

DEMO HERE

Note: I have only done this for the first two links.

---

Method 2

A better way to do this is the following:

HTML:

<div id="con">
    <ul>
        <li><a href="#test1">Test</a></li>
        <li><a href="#test2">Test</a></li>
        <li><a href="#test3">Test</a></li>
    </ul>
</div>

CSS:

#con {
    width: 100%;
    background: #eee;
    text-align: center;
}
ul {
    list-style: none;
}
li {
    display: inline-block;
    width: 80px;
    height: 50px;
    outline: 1px solid #000;
}

a {
    display: block;
    height: 100%;
    width: 100%;
}

Keep <a> inside and set it to display: block;, then set the width and height to 100% and this will take up the whole div creating a div link.

Demo of div link - DEMO HERE

Demo with hover - DEMO HERE

Hope this helps.