CSS -Menu work as <a href> with background not just text - html

Question

my code of menu work fine, but only text is a href, how ever i try to make it a bit more user friendly so make even background in to work as href but its not working, can somebody help me to fix it?
My HTML:
<div id="menu">
<ul>
<li>GAMESITES<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>HRY<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>SERVERY<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>CLANKY<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>FORUM<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>DOWNLOADS<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>BLOGY<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>FLASHOVKY<span class="arrow"></span></li>
</ul>
</div>
My CSS:
#menu{
background-image: url("images/menubg.png");
background-repeat: repeat-x;
height: 44px;
width: 983px;
margin: 0 22px;
}
.spacer{
background-image: url("images/menu_spacer.png");
background-repeat: no-repeat;
width: 1px;
height: 25px;
margin: 0px 12px;
}
#menu ul{
list-style-position: inside; /* Bodka v novom riadku vo vnutry */
list-style-type: none; /* bez bodky */
}
#menu ul li{
padding: 0px 5px 0px 0px;
display: inline-block;
color: #f7f7f7;
}
.arrow{
background-image: url("images/sipka.png");
background-repeat: no-repeat;
width: 10px;
height: 8px;
margin-left: 8px;
display: inline-block;
}
Live preview: http://funedit.com/andurit/try4/

Answer 1

Your markup can be heavily simplified into this:
<div id="menu">
<ul>
<li>GAMESITES</li>
<li>HRY</li>
<li>SERVERY</li>
<li>CLANKY</li>
<li>FORUM</li>
<li>DOWNLOADS</li>
<li>BLOGY</li>
<li>FLASHOVKY</li>
</ul>
</div>
Flexbox solution
If you're willing to explore modern CSS specifications, you can always use flexbox instead of relying on inline-block to position your elements — check out the demo fiddle here: http://jsfiddle.net/teddyrised/9FZS8/
#menu {
background-image: url(http://funedit.com/andurit/try4/images/menubg.png);
background-repeat: repeat-x;
height: 44px;
width: 983px;
font-family: Arial;
}
#menu ul{
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
color: #f7f7f7;
flex: 1 1 auto;
}
#menu ul li a {
background-image: url(http://funedit.com/andurit/try4/images/menu_spacer.png);
background-repeat: no-repeat;
background-position: top right;
color: #f7f7f7;
display: block;
padding: 14px 0;
text-decoration: none;
text-align: center;
}
#menu ul li:last-child a {
background: none;
}
#menu ul li a:after {
background-image: url(http://funedit.com/andurit/try4/images/sipka.png);
content: '';
width: 10px;
height: 8px;
margin-left: 8px;
display: inline-block;
}
Non-Flexbox solution
Otherwise, you can always fallback to floating your individual <a> elements, but that requires you to calculate the padding for each of them carefully so the menu does not overflow: http://jsfiddle.net/teddyrised/9FZS8/2/
#menu {
background-image: url(http://funedit.com/andurit/try4/images/menubg.png);
background-repeat: repeat-x;
height: 44px;
width: 983px;
font-family: Arial;
}
#menu ul{
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#menu ul li {
color: #f7f7f7;
}
#menu ul li a {
background-image: url(http://funedit.com/andurit/try4/images/menu_spacer.png);
background-repeat: no-repeat;
background-position: top right;
color: #f7f7f7;
float: left;
padding: 14px 15px; /* Disadvantage: you will have to adjust this padding MANUALLY */
text-decoration: none;
text-align: center;
}
#menu ul li:last-child a {
background: none;
}
#menu ul li a:after {
background-image: url(http://funedit.com/andurit/try4/images/sipka.png);
content: '';
width: 10px;
height: 8px;
margin-left: 8px;
display: inline-block;
}

Answer 2

Add to your links a padding of x and a margin of -x, for example:
#menu a {
padding: 20px;
margin: -20px;
}

Answer 3

Make link to take full space:
li > a{
display:inline-block;
width: 100%;
height: 100%;
}