Navigation bounces on first and last li link in IE 6 only

I'm having a weird problem with my navigation in IE 6. Only the first and last links of the navigation bounce when hovered over.

Why would this be happening?

My CSS file:

#navigation {
    width: 930px;
    height: 30px;
    background-color: #f1faff;
    text-align:center;
}

#navigation  ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    line-height: 30px;
}

#navigation  ul li {
    display: inline;
}

#navigation  ul li a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #0067b4;
    display: inline;
    text-decoration: none;
    text-transform: uppercase;
    padding: 7px 50px;
}

#navigation  ul li a:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #5e5e5e;
    display: inline;
    text-decoration: none;
    text-transform: uppercase;
 开发者_Python百科   padding: 7px 50px;
}

#navigation  ul li a.first {
    padding-left: 8px;
    margin: 0px;
    overflow: hidden;
    border: 0px;
}

#navigation  ul li a.last {
    padding-right: 8px;
    margin: 0px;
    overflow: hidden;
    border: 0px;
}

The site where this is happening is available at http://www.paysonsecure.com/protekskiracing/

I would add this to your global-ie6.css

#navigation ul { display: inline-block; }

Thanks gutierrezalex!! I had the same problem and it works adding {display: inline-block;} at my styles..it works for any browser:

ul.menu li a{
    text-decoration:none;
    color:black;
    display:block;
    padding:0;
    margin:0;
    display:inline-block;
   }

ul.menu li a:hover{
   background-color:#5cc2ed;
   color:#ffffff;
   display:inline-block;
  }