So I am trying to make a tabs in a menu but cant make the whole width of each of the tabs 219px. it only allows me to make the li 219 but I wanna make the li a 219px. I cant seem to figure it out. Also is there a way to make a next button or would the best way to go to each tab and literally put in the next tab in a type of way?

any help would be greatly appreciated

Css

.servicesNavigation li {
    float: left;
    list-style: none;
    width: 219px;
}

ul.servicesNavigation li a {
    padding: 3px 5px;
    background-color: #ccc;
    color: #000;
    text-decoration: none;
    width: 219px;
}

ul.servicesNavigation li a.selected, ul.tabNavigation li a:hover {
    background-color: #333;
    color: #fff;
    padding-top: 7px;
}

ul.servicesNavigation li a:focus {
    outline: 0;
}

HTML

<ul class="servicesNavigation">
<li><a href="#Web">Web</a></li>
<li><a href="#Print">Print</a></li>
<li><a href="#DynamicContent">Dynamic Content</a></li>
<li><a href="#Hosting">Hosting</a></li>
</ul>       

Jquery

var tabContainers = $('div.servicesInfo > div');
tabContainers.hide().filter(':first').show();

$('div.servicesInfo ul.servicesNavigation a').click(function () {
    tabContainers.hide();
    tabContainers.filter(this.hash).show();
    $('div.servicesInfo ul.servicesNavigation a').removeClass('selected');
    $(this).addClass('selected');
    return false;
}).filter(':first').click();