Menu problemer

Hejsa

Jeg er ved at prøve at lave en menu i CSS, men er stødt på en lille problem.

Her er koden:

<style type="text/css">
 
    a, a:visited{
    color: #000000;
    text-decoration:none;
    } 
   
    .menu {
    width: 600px;
    margin: 1em 0;
    padding: 0px 0.5em;
    background-color: #e4e3e4;
    background-image: none;
    border: 1px solid #000000;
    font-family: "Showcard Gothic", "Stencil Std", Verdana, sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    ;
    text-decoration: none;
   
    }
    .menu ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
     
    }
    .menu li {
    margin: 0;
    float: left;
    padding:10px;
    border-right-width: thin;
    border-right-style: solid;
    border-right-color: #000000;
  }
 

   
    .menu li a{
    text-align: center;
   
    }
   
    .menu li a:hover{
    text-align: center;
      border-top-width: thin;
      background:#C0BBBB;
      color:#ffffff;
     
    }
   
    .menu li a#current{
    text-align: center;
        color:#ffffff;
        background-color:#000000;
 
    }
   
   

  </style>
</head>
    <div class="menu">
      <ul>
        <li><a href="#" id="current">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
      </ul>
      <br clear="left">
    </div>

eksempel her: www.jansangill.dk


Mit problem er at jeg ved ikke hvordan man får baggrunden til at have samme farve som #current og :hover.

Altså hvordan gør man således at det ikke kun er bogstaverne der bliver selected, men også baggrunden bag det.