Probleme meniu navigare

Salut!
Am o problema la meniu de navigare la un webiste, si anume in momentul in care apas pe marginile butonului, linkul nu functioneaza. Functioneaza doar in cazul in care apas direct pe scrisul din buton si as vrea sa functioneze pe toata suprafata butonului:
Aveti mai jos codul:

HTML
<section id=" nav-container ">
  <div id=" nav ">
  <ul>
  <li class="home active"><a href="index.php"><span>Home</span></a></li>
<li><a href="publicitate-fonduri-europene-ziare-nationale.php"><span>Ziare Nationale</span></a
  ></li>
  <li><a href="publicitate-fonduri-europene-ziare-locale.php"><span> Ziare Locale</span></a> </li>
   <li><a href="modalitati-de-plata.php"><span>Modalitati de plata</span></a>  </li>   
  <li> <a href="contact.php"><span> Contact</span></a></li>
  </ul>
</div>
    </section>

CSS

/* Navigation
----------------------------------------------------------------------------- */
#nav-container{
    float: left;
    width: 670px;
    height: 40px;
    z-index: 200;
    position: relative;  
    background: #333;
}
#nav-container:after{
    position:absolute;
    bottom:0px;
    right:0;
    content:".";
    text-indent:-9999px;
    overflow:hidden;
    display:block;
    width:0px; height:0px;
    border-bottom: 40px solid #fff;
    border-left: 18px solid transparent;
}
#nav-container select{
    display: none;
}
/* MAIN NAVIGATION STYLES
----------------------------------------------------------------------------- */
#nav{
    height: 100%;
    margin:0;
    list-style: none;
    float: left;
    position: relative;

}
#nav li.home{
    padding: 12px 15px 11px 25px;
    background-image: url('../img/menu-icon.png');
    background-repeat:no-repeat;
    background-position: 8px center;
}
#nav li.home:before{
    position:absolute;
    bottom:0px;
    left:-18px;
    content:".";
    text-indent:-9999px;
    overflow:hidden;
    display:block;
    width:0px; height:0px;
    border-bottom: 40px solid #333;
    border-left: 18px solid transparent;
}
#nav li.home:hover,
#nav li.home.active{
    background-image:  url('../img/menu-icon-hover.png');
    background-position: 8px center;
    background-repeat: no-repeat;
}
#nav > ul{
    display: block !important;
}
#nav li{
    float: left;
    position: relative;
    padding: 12px 15px 11px 15px;
    cursor: pointer;
}
#nav li.active a{
    border-right: none;
}
#nav li a{
    float: none;
    display: block;
    font: 12px 'Open Sans', Arial, sans-serif;
    color: #aaa;  
    text-transform: uppercase;
}
#nav li:hover a,
#nav li.active a{
    color: #fff;
}

Adauga

padding: 12px 15px 11px 15px;

de la #nav li la #nav li a.

HpVirus, on 04 aprilie 2014 - 18:25, said:

Nu merge! Plus ca se mareste butonul foarte mult!

http://stackoverflow...div-into-a-link

thx MikeD

Am rezolvat problema astfel:

<section id="nav-container">
  <div id="nav">
  <ul>
  <li class="home active" onclick="location.href='page.html';"  style="cursor:pointer;">Home</li>
<li onclick="location.href='page.html';"  style="cursor:pointer;">Ziare Nationale</li>
  <li onclick="location.href='page.html';"  style="cursor:pointer;">Ziare Locale </li>
  <li onclick="location.href='page.html';"  style="cursor:pointer;">Modalitati de plata</li>   
  <li onclick="location.href='page.html';"  style="cursor:pointer;"> Contact</li>
  </ul>
</div>
    </section>

Cu plăcere.

mai trebuia cursor pointer? daca nu modifici tu cursorul e cam din default