hola tengo un problema y no lo se resolver
este es mi codigo:
Código HTML:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="static/css/index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="static/jscript/funciones.js"></script>
</head>
<body>
<div id="head" style="display:none">
<div id="logo"> <a href="/" title="Taringa!" id="logoi"><img src="http://i.t.net.ar/images/space.gif" border="0" alt="Taringa!" title="Taringa!" align="top" /></a> </div>
<div id="user">
<ul class="lavaLamp">
<li><a href="cuenta.php" title="Mi cuenta ('.$_SESSION['nick'].')">Mi cuenta</a></li>
<li><a href="logout.php" title="Cerrar sesion ('.$_SESSION['nick'].')">Salir</a></li>
</ul>
</div>
<div id="nav">
<ul class="lavaLamp">
<li><a href="/blog/" class="font">Inicio</a></li>
<li><a href="/blog/proyectos/" class="font">Perfil</a></li>
<li><a href="/blog/about/" class="font">Mensajes</a></li>
<li><a href="/blog/contactar/" class="font">Gente</a></li>
<li><a href="/blog/contactar/" class="font">Videos</a></li>
</ul>
</div>
<br class="clear">
</div>
<div id="content">hola</div>
</body> y este mi css:
Código HTML:
body {
margin: 0px;
font: 11px Arial, Helvetica, sans-serif;
background-repeat: repeat }
#logo {
width: 85px;
height: 20px;
float: left; }
#logoi {
width: 100px;
height: 29px;
background: url('../img/logo.png') no-repeat;
float: left; }
#head {
background: url("http://img224.imageshack.us/img224/1598/head.png") repeat;
padding: 1px 0 8px 0;
border-bottom: #6080c0 2px solid ;
height: 22px; }
#content{
height: auto;
padding: 9px 0 8px 9; }
#nav {
margin-left: 70px;
width: 829px; }
#user { float: right; }
.lavaLamp {
padding-left: -10;
margin: 0;
margin-top: 2px; }
.lavaLamp li {
float: left;
list-style: none;
margin-right: 8px; }
.lavaLamp li a {
font-size: 12px;
text-decoration: none;
color: #fff;
outline: none;
text-align: center;
top: 5px;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 23px;
position: relative;
overflow: hidden;
padding: 0 2px; }
.lavaLamp li a:hover {
height: 25px;
color:#fff;
margin-top:0;
background-color:#4080a0;
background-position:top}
.font {
font-weight: bold;
color: #fff; }
lo que pasa es que los link quiero que cuando cambia de color el color
cubra todo el div y no solo desde el link para abajo se entiende