Wordpress menu DW Tutorial

Question

I followed Adobe's tutorial Editing a WordPress theme with Dreamweaver CS. Everything works fine apart from the links in the menu: I cannot get the on hover css applied to the buttons. Since I am working on a local server, I cannot show the test pages, but this is the menu as generated (?):
<div class="topnavigationArea">
  <div class="container">
    <div class="topnavigationgroup">
<div class="menu"><ul><li class="page_item page-item-25 current_page_item"><a href="http://localhost/">home</a></li><li class="page_item page-item-9"><a href="http://localhost/?page_id=9">cursussen</a></li><li class="page_item page-item-6"><a href="http://localhost/?page_id=6">docenten</a></li><li class="page_item page-item-12"><a href="http://localhost/?page_id=12">praktische zaken</a></li><li class="page_item page-item-15"><a href="http://localhost/?page_id=15">alumni</a></li><li class="page_item page-item-18"><a href="http://localhost/?page_id=18">contact</a></li><li class="page_item page-item-21"><a href="http://localhost/?page_id=21">login</a></li></ul></div>
</div>
CSS applied to page_item to set bg-color works fine, current page marker works too, but when I apply any css to the links on hover, the effect only shows on the text in the button, not the whole of the button.
Can someone help me to get the desired effect (ie the background of the button changes color on hover)?
Thank you.

Answer 1

The CSS for the menu:
/* MENU */
.topnavigationArea {
    width: 100%;
    background-image: url(images/topnav_bkgd.jpg);
    background-repeat:repeat-x;
    background-color:#666;
.topnavigationgroup {
    margin: 0px;
    float: right;
    p/adding-right: 40px;
.topnavigationgroup ul {
    margin: 0px;
.topnavigationgroup ul li {
    max-width: 167px;
    margin-left: 0px;
    padding-left: 10px;
    padding-top: 2px;
    padding-right: 8px;
    padding-bottom: 2px;
    border-left-style:none;
    border-left: 1px solid #F5DC32;
    border-right-style: none;
    border-right-width: 1px;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    float: left;
    list-style-type: none;
    display: block;
.topnavigationgroup ul li:first-child {border: none;}
.topnavigationgroup ul li a {padding:2px 10px;}
.page_item {
    text-decoration:none;
    display: block;
    color: #FFFFFF;
    background-color: #666;
.current_page_item {
    background-color: #FF6E3D;