ul li button is clickable only the text area - html

Question

I have a problem with this simple made list. Only the text is clickable, I'm tying to make the whole block of the text to be clickable but I have failed. I've tried almost everything I could find but seems nothing is working for my code.
My HTML5
<ul>
<li>Αρχική</li>
<li>Συμπληρώματα
<ul>
<li>Πρωτεΐνες</li>
<li>Αμινοξέα</li>
<li>Κρεατίνες</li>
<li>Νιτρικά</li>
<li>Λιποδιαλυτικά</li>
<li>Μπάρες Πρωτεΐνης</li>
<li>Ροφήματα</li>
<li>Ειδικά</li>
</ul>
</li>
<li>Μάρκες
<ul>
<li>Maximuscle</li>
<li>IronMaxx</li>
<li>Leofit</li>
</ul>
</li>
<li>Υπηρεσίες
<ul>
<li>Λιπομέτρηση</li>
<li>Διατροφή</li>
<li>Πρόγραμμα Προπόνησης</li>
</ul>
</li>
<li>Κατάστημα</li>
</ul>
And my CSS3
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);
position: relative;
top: 50px;
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #2B2B2B;
color:#CCC;
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;
}
Excuse my ignorance but I am new to the whole thing.

Answer 1

Instead of targetting the ul li elements as clickable, you need to target the 'a' (Anchor) as it is this that is clicked.
For example, if you add padding to the 'a' then you will notice the cursor change before you hover over the text.
If you are looking at doing a navigation menu whet you want all your links to of the same width you need to make the 'a' a block level element so that it takes up all the wish of its patent li.
follow a simple tutorial such as: http://www.cssterm.com/css-menus/vertical-css-menu/simple-vertical-menu
I see you are also trying to do nested menus (menu in a menu item). You can find many tutorials that can help with nested menus also.