tratar elementos como bloques

bueno aki os mado la hoja de estilo general y la plantilla html
el asunto es, que al tratar el menu como bloques, estos (los bloques), no se muestran de uno en uno si no de dos en dos,el tercero con el segundo y el primero con el segundo, pasandole lo mismo al darles color. y cuando paso el raton por en cma del tercer punto de la lista e txto de cerpo y pie de pagina aparecen como si le hubieramos dado la caracteristica de hover como al menu, pero sin fondo plateado aplicado.
os mando la hoja de estilo y la plantilla haber si encontrais el error porque yo no. muxas gracias

hoja de estilo-general

* {margin:0px ; padding:0px ; border: 0px}
body {text-align: center}
#global {width:800px ; margin: 4px auto }
#cabecera {background-color: pink }
#navegacion {background-color: gray }
#contenido {background-color: orange ; width: 800px ; float:left}
#menu {background-color: yellow ; width: 150px ; float:left ; text-align:left }
#menu li {list-style:none ; margin: 4px 0px 4px 6px}
#pie {background-color: brown}
a {color:brown; text-decoration:none; display:block}
a:link {}
a:visited {}
a:hover {color:red; text-decoration:underline; background-color:silver}
a:active {}

plantilla.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="cabecera">Bienvenidos a mi Web</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">
<div id="menu">menu
<ul>
  • <a href="#">elemento de lista, 1
  • <a href="#">elemento de lista, 2
  • <a href="#">elemento de lista, 3
    </div>
    Esta será la zona principal de la web
    </div>
    <div id="pie">Este es el pié de página</div>
    </div>
    </body>
    </html>