CSS - Style menu clickable places - html

Question

Hey guys i am styling my first website and i am having problem with my secondary menu, atm just text work as link and i need to change it to whole li will works as link.
I need to do it in CSS not JS.
Live version: http://funedit.com/andurit/try9/ (u can see multiple submenues there, they are all same CSS / HTML
HTML:
<nav class="submenu">
<ul>
<li><span class="text">HERNÍ SERVERY </span><span class="arrows"></span></li>
<li><span class="text">BAN LIST </span><span class="arrows"></span></li>
<li><span class="text">UNBAN ŽÁDOSTI </span><span class="arrows"></span></li>
<li><span class="text">ADMINI </span><span class="arrows"></span></li>
</ul>
</nav>
CSS:
.submenu{
color: #1a6eb6;
display: inline-block;
height: 50px;
width:780px;
}
.submenu ul {
margin-left: 20px;
padding-left: 0px;
}
.submenu ul li{
list-style-position: inside; /* Bodka v novom riadku vo vnutry */
list-style-type: none; /* bez bodky */
background-image: url("images/shop_menu_bg.png");
background-repeat: repeat-x;
height: 38px;
width: 187px;
display: inline-block;
color: #1a6eb6;
}
.submenu ul li:hover {
background-image: url("images/shop_menu_bg_hover.png");
width: 187px;
height: 38px;
}
.submenu ul li .text{
color: #1a6eb6;
display: inline-block; /* aby sa dala rovnomerne posunut sipka a nie podla dlzky textu*/
height: 31px;
width:115px;
line-height: 28px;
margin-left: 5px;
}
.submenu ul li .arrows{
background-image: url("images/arrows.png");
background-repeat: repeat-x;
display: inline-block;
height: 17px;
width: 14px;
margin: 0px 0px 0px 45px;
vertical-align: middle;
}
.submenu ul li:hover .arrows{
background-position: -3px -14px;
}
Can somebody help me with it?
p.s. Thanks for reading this post :)

Answer 1

Replace some of the CSS with the CSS I have below, setting the span.text width to 100%, then the arrows span to position: absolute and then set their parent to position: relative that should do the trick
.submenu ul li {
background-image: url("images/shop_menu_bg.png");
background-repeat: repeat-x;
color: #1A6EB6;
display: inline-block;
height: 38px;
list-style-position: inside;
list-style-type: none;
position: relative; /* added this */
width: 187px;
}
.submenu ul li .text {
color: #1A6EB6;
display: inline-block;
height: 31px;
line-height: 28px;
margin-left: 5px;
position: relative; /* added this for correct z-index */
width: 100%; /* added this */
z-index: 3; /* added this */
}
.submenu ul li .arrows {
background-image: url("images/arrows.png");
background-repeat: repeat-x;
display: block;
height: 17px;
margin: 0;
position: absolute; /* added this */
right: 10px; /* added this to position it correctly */
top: 6px; /* added this to position it correctly */
vertical-align: middle;
width: 17px;
z-index: 2; /* added this for correct z-index */
}
.submenu ul li .text a {
color: #636363;
display: block; /* added this */
width: 100%; /* added this */
}

Answer 2

Change the structure slightly so that the text and the arrow are inside your hyperlink like this:
<li><span class="text">DISKUSNÍ FÓRUM </span><span class="arrows"></span></li>
And then style your 'li a' to:
.submenu ul li a{display:block}
That should do the trick.