Deja así tus estilos:
Código css:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin: 0; padding:0; outline: none; border: 0;}
#nav {width:994px; overflow:hidden; text-align:right;}
#nav ul {float:left;}
#nav li {
float:left;
margin:0px 2px;
text-align:center;
font:normal 12px Arial, Helvetica, sans-serif;
color:#FFF;
border: 1px solid #000;
background: url(pest_color.gif) no-repeat; list-style-type: none;}
#nav li a {
background: #cdcdcd url(pest_off.gif) 0 0 no-repeat;
text-align:center;
display:block;
font:normal 12px Arial, Helvetica, sans-serif;
color:#9D4A00;
text-decoration:none;
height:29px;
width: 120px;
line-height:31px;
}
#nav li a:hover {
color:#000;
}
#nav li a.navegacion_corto2 {
float:left;
width:78px;
text-align:center;
display:block;
font:normal 12px Arial, Helvetica, sans-serif;
color:#9D4A00;
background:red url(pest_off_corta2.gif) 0 0 no-repeat;
text-align:center;
text-decoration:none;
height:29px;
line-height:31px;
margin-left: 0px;
margin-right: 0px;
}
#nav li a:hover.navegacion_corto2 {
color:#000;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li
><a href
="link1.php">Link1</a
></li
> <li
><a href
="link2.php">Link2</a
></li
> <li
><a href
="link3.php">Link3</a
></li
> <li
><a class
="navegacion_corto2" href
="link4.php">Link4</a
></li
> <li
><a class
="navegacion_corto2" href
="link5.php">Link5</a
></li
> <li
><a class
="navegacion_corto2" href
="link6.php">Link6</a
></li
> </ul>
</div>
</body>
</html>
No lo he revisado a fondo, ¿vale?
He colocado un dorde y un fondo plano para ver dónde está cada elemento, pues no contamos con tus fondos de imagen (suprímelos).
El tema de ie6 no lo he mirado, pero supongo que tendrá que ver con que no hace caso al "!important"
Editado para actualizar el código