html and css3 menu link clickable not work properly - html

Question

Hi all I have simple menu but I don't know how to make link in whole square. Now only working on link click.
<ul><li>Menu 1</li>
<li>Menu 2</li>
<li>
Menu 3
<ul>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
</ul>
</li>
</ul>
CSS:
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
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;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
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;
}
ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
JSFiddle Demo

Answer 1

Remove the padding from li and add it to the a instead. Also set your a to display:block.

Answer 2

Move your padding from the <li> to the <a> and set your anchor to display: block;
/* add this selector */
li > a {
padding: 15px 20px;
display: block;
}
Your updated jsFiddle: https://jsfiddle.net/q5y1sg9v/1/

Answer 3

It will open the link when the element gets clicked. You want it to open the link when the grey box is clicked.
Therefore you have to make the size of the same size as the grey box. And as the others pointed out you will have to remove the padding from li and give it to a instead (or specify its height and width).