CSS - Style menu clickable places

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"><a href="#">HERNÍ SERVERY </a></span><span class="arrows"></span></li>
        <li><span class="text"><a href="#">BAN LIST  </a></span><span class="arrows"></span></li>
        <li><span class="text"><a href="#">UNBAN ŽÁDOSTI  </a></span><span class="arrows"></span></li>
        <li><span class="text"><a href="#">ADMINI </a></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><a href="#" style="display:block"><span class="text">DISKUSNÍ FÓRUM </span><span class="arrows"></span></a></li> 

And then style your 'li a' to:

.submenu ul li a{display:block}

That should do the trick.