tengo problemas con el menu

resulta que estoy creando una pagina para bacteriologos, de consultas y eso, entonces en la pagina inicial hice un menu,hasta ahi todo bien, pero cunado le di estilos para subrrayar y dar color al tocar el vinculo, quedo bien para el menu pero, me tomo los parrafos y todo es decir cuando toco el ultimo vinculo que es genetica, resulta que tambien toma los parrafos del lado, los subrraya y les da un color, no se que hacer:
mi pagina de index se ve asi

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

<html>
<head>
<title>pagina principal Mundo Microscopico</title>
<link rel="stylesheet"href="estilos.css"type="text/css"media="all">
</head>
<body>
<div id="menu">
<ul>
  • Introduccion a la Bacteriologia
  • Bacteriologia
  • Parasitologia
  • Micologia
  • uroanalisis
  • Hematologia
  • <a href="#">Genetica</lu>
    </div>

    <p class="centrado">BIENVENIDOS A MUNDO MICROSCOPICO</p>
    <p class="justificado">Amigos bacteriologos esta pagina es para ustedes,aqui pueden exponer sus inquietudes, dar ideas y por que no publicar sus monografias o articulos, para que otros puedan observarlos.


    [contenido no disponible]</p>
    </body>
    </html>

    y mi pagina de estilos se ve asi

    *{margin:0px;padding:0px;border:0px}
    #contenido{backgroun-color:orange;width:800px;float:left}
    body{background-color:#E0FFFF;background-image:url(objetos/mundo.jpg);background-position:center center;background-repeat:no-repeat;height:100%}
    .centrado{text-align:center}
    .justificado{text-align:justify}
    #menu{background-color:yellow;width:150px;float:left;text-align:left}
    #menu li{list-style:none;margin:4px 0px 4px 6px}
    a{color:brown;text-decoration:none;display:block}
    a:link{}
    a:visited{}
    a:hover{color:red;text-decoration:underline;background-color:pink}

    Agradezco si alguien me puede colaborar :oops: :oops: :cry: :cry: