Dropdownmenu: Only words clickable not whole box - html

Question

I've got a dropdownmenu for my site and I noticed only the words itself are clickable not the whole box the word (link) is placed in.
I already added display: block; to the a element but this seems to only work horizontal, still not the whole box.
Hope you can help me out! And Thank you in advance!
Here's de css code:
#dropdownmenu a {
color:inherit !important;
display:block;
text-decoration:none !important}
#dropdownmenu {
width:1050px;
background:#137cd7;
z-index:2;
position:relative }
#dropdownmenu ul {
text-align:left;
display:inline;
margin:0px;
padding:10px 4px 25px 0;
list-style:none }
#dropdownmenu ul li {
display:inline-block;
margin-right:10px;
position:relative;
padding:15px 15px 14px;
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;
color:#fff }
#dropdownmenu ul li:hover {
background-color:#ffffff;
color:#137cd7 }
#media screen and (-webkit-min-device-pixel-ratio:0)
#dropdownmenu ul li ul {
top:44px !important}
#dropdownmenu ul li ul {
padding:0px;
position:absolute;
top:47px;
left:0px;
width:170px;
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 }
#dropdownmenu ul li ul li {
background-color:#fff;
display:block;
color:#222;
border-left:1px solid #ccc;
border-right:1px solid #ccc;}
#dropdownmenu ul li ul li:hover {
color:#137cd7;
background:#222;
text-decoration:none !important }
#dropdownmenu ul li:hover ul {
display:block;
opacity:1;
visibility:visible;
border-bottom:1px solid #ccc; }
And HTML:
<div id="dropdownmenu">
<ul>
<li>
Home</li>
<li>
Menu 1
<ul>
<li>
Submenu</li>
<li>
Submenu</li>
<li>
Submenu</li>
<li>
Submenu</li>
<li>
Submenu</li>
<li>
Submenu</li>
<li>
Submenu</li>
</ul>
</li>
<li>
Menu 2
<ul>
<li>
Submenu</li>
<li>
Submenu</li>
<li>
Submenu</li>
<li>
Submenu</li>
<li>
Submenu</li>
<li>
Submenu</li>
<li>
Submenu</li>
</ul>
</li>
<li>
Contact
<ul>
<li>
<img alt="" src="/files/19731/editor/images/support(1).JPG" style="width: 140px; height: 140px; border-width: 0px; border-style: solid;" /></li>
<li>
</li>
</ul>
</li>
</ul>
fiddle here
Thanks everyone!
Thank you for the answer! This helped me a lot! Everything works excellent now!

Answer 1

On the image below, you can see your dropdown's anchor in blue, and your li padding in green.
When you click on the green area, the browser will not follow the anchor which is a normal behaviour.
To correct that, remove the li padding, and apply it to the anchor. As anchors are inline elements, you'll have to display them as block to apply padding.
#dropdownmenu a {
padding:15px 15px 14px;
display: block;
}
I also have done some CSS improvements, you can take a look on the updated Fiddle