Hintergrundfarbe wie länge des Wortes

[elah]

Hallo ihr,

ich brauch kurz eure Hilfe bei einem kleinen Problem. Ich will eine Liste als Menü verwenden. Die einzelnen Punkte sollen mit Abstand untereinander stehen und jeweils von einer weißen Box umgeben sein. Diese soll sich in der Länge nach dem Menüpunkt richten (z.B. Architektur und jeweils ein margin darum)

<ul>
<li><a href="me.html">Me</a></li>
<li><a href="architektur.html">Architektur</a></li>
<li><a href="webdesign.html">Webdesign</a></li>
<li><a href="fotografie.html">Fotografie</a></li>
</ul>

Dazu habe ich folgenden CSS-TExt geschrieben. Leider ist die weiße Box nun bei den einzelnen Punkten genau gleich lang. Was muss ich ändern, damit sie sich dem Wort anpasst?

#menu ul{
font-family: Geneva, Lucida Grande, Verdana, Lucida Sans Unicode;
margin: 0px 0px 0px 0px;
padding: 0px;
text-align:left;
list-style-position:outside;
list-style-type:none;
font-size: 110%;
font-weight:bold;

}

#menu li a, #menu li a:link{
text-decoration:none;
color: #000;
padding: 2px 10px 2px 6px;
margin: 00px 0px 10px 0px;
background: #fff;
display: block;
}

#menu li a:hover{
font-weight: bold;}

#menu li.current a {
background:#ffff99;
color: #666666;
}

Danke für eure Hilfe
Elah