css drop down menu can hover on text only - css

Question

When using my css dropdown menu only the text of the dropdown is active which makes it more difficult to select rather than the area which would be easier (especially with mobile devices).
CSS is:
#topMenu ul {
text-align: center;
display: inline;
margin: 0;
padding: 15px 20px 17px 20px;
list-style: none;
}
#topMenu ul li {
font: bold 12px sans-serif;
text-transform:uppercase;
color:#666;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 10px 40px;
background: #EEE;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
#topMenu ul li:hover {
background: #EEE;
color: #000;
}
#topMenu ul li ul {
z-index: 5000;
padding: 0;
position: absolute;
top: 38px;
left: 0;
width: 150px;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
#topMenu ul li ul li {
background: #EEE;
display: block;
color: #000;
border:solid 1px #999999;
}
#topMenu ul li ul li:hover { background: #EEE; }
#topMenu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
Code may be a bit cumbersome.
Thanks

Answer 1

You can add display:block; to your anchor tag CSS to make it fill the li.
CSS:
#topMenu ul li ul a {
display: block;
}
HTML:
<ul id="topMenu">
<li>
<ul>
<li>
Link Text
</li>
<!-- more submenu items -->
</ul>
</li>
<!-- more topMenu items -->
</ul>

Answer 2

Try this <---> instead of use padding:10px 40px to determine the height use this:
line-height:30px <---- it replaces the padding top and bottom (20px) and add 10px of the font.
Then your CSS could be:
#topMenu ul li {
font: bold 12px sans-serif;
text-transform:uppercase;
color:#666;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 0px 40px;
line-height:30px;
background: #EEE;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
If you have a tags inside the li then make it block and the same line-height:
#topmenu ul li a {
display:block;
line-height:30px;
height:30px;
}