Hola otra vez.
En realidad, mi opinión es que tienes mucho más código de que necesitas. Prueba esto y me comentas:
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Indice lateral izquierdo</title>
<style type="text/css">
body{
font-family: "Curlz MT", "Kabel Bk BT";
margin: 10px 0px 0px;
}
ul {
list-style-image: url(imagenes/panteonrojo.gif);
}
li {
margin-bottom: 5px!important;
margin-bottom: -4px;
}
li a {
width: 80px;
height: 15px;
display: block;
text-decoration: none;
}
a#iii{
background: url(imagenes/sec/inicio1.png) no-repeat;
}
a:hover#iii{
background: url(imagenes/sec/inicio2.png) no-repeat;
}
a#hhh{
background: url(imagenes/sec/historia1.png) no-repeat;
}
a:hover#hhh{
background: url(imagenes/sec/historia2.png) no-repeat;
}
a#ppp{
background: url(imagenes/sec/personajes1.png) no-repeat;
}
a:hover#ppp{
background: url(imagenes/sec/personajes2.png) no-repeat;
}
a#ggg{
background: url(imagenes/sec/geografia1.png) no-repeat;
}
a:hover#ggg{
background: url(imagenes/sec/geografia2.png) no-repeat;
}
a#ttt{
background: url(imagenes/sec/turismo1.png) no-repeat;
}
a:hover#ttt{
background: url(imagenes/sec/turismo2.png) no-repeat;
}
a#ccc{
background: url(imagenes/sec/cultura1.png) no-repeat;
}
a:hover#ccc{
background: url(imagenes/sec/cultura2.png) no-repeat;
}
a#mmm{
background: url(imagenes/sec/masdatos1.png) no-repeat;
}
a:hover#mmm{
background: url(imagenes/sec/masdatos2.png) no-repeat;
}
a#bbb{
background: url(imagenes/sec/bibliografia1.png) no-repeat;
}
a:hover#bbb{
background: url(imagenes/sec/bibliografia2.png) no-repeat;
}
a#coco{
background: url(imagenes/sec/contactar1.png) no-repeat;
}
a:hover#coco{
background: url(imagenes/sec/contactar2.png) no-repeat;
}
</style>
</head>
<body>
<img src="imagenes/logo.jpg" alt="Atenas"
title="Atenas"
style="margin-left: 24px; width: 85px; height: auto;"><br>
<ul type="image">
<li> <a id="iii" href="historia.html"
target="cuerpo-inicio"> </a> </li>
<li> <a id="hhh" href="historia.html"
target="cuerpo-inicio"> </a> </li>
<li> <a id="ppp" href="personajes.html"
target="cuerpo-inicio"> </a> </li>
<li> <a id="ggg" href="geografia.html"
target="cuerpo-inicio"> </a> </li>
<li> <a id="ttt" href="lugares.html"
target="cuerpo-inicio"> </a> </li>
<li> <a id="ccc" href="cultura.html"
target="cuerpo-inicio"> </a> </li>
<li> <a id="mmm" href="datos.html"
target="cuerpo-inicio"> </a> </li>
<li> <a id="bbb" href="biblio.html"
target="cuerpo-inicio"> </a> </li>
<li> <a id="coco" href="formulario.html"
target="cuerpo-inicio"> </a> </li>
</ul>
<!--Script para mostrar el contador de visitas:-->
<p style="margin-top: 30px; margin-left: 30px;"><a
href="http://www.ademails.com/estadisticas1059923110.htm"
target="_blank">
<script type="text/javascript" language="JavaScript">
<!--
document.write("<img src=\"http://www.ademails.com/cgi-bin/contador.cgi?ID=1059923110");
document.write("&referer=");
document.write(escape(document.referrer));
document.write("\" border=0 alt=\"Estadisticas\" title=\"Nº de visitas\">");
// -->
</script>
<noscript><img
src=http://www.ademails.com/cgi-bin/contador.cgi?ID=1059923110 border=0
alt="Nº de visitas" title="Nº de visitas"></noscript>
</a></p>
</body>
</html>