problema con menu

hola tengo un problema con mi menu. Antes estaba todo bien y creo que sin querer toce algo y las secciones no apparecen bien.

Esta es mi plantilla:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilos-general.css" type="text/css" media="all">
</head>
<body>

<div id="background"><div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo"></div>

</div>
<div id="navegacion"
  • Seccion 1
  • Seccion 2
  • Seccion 3
  • Seccion 4

    </div>
    <font color="white">
    <div id="contenido">
    </font>
    <div id="menu">
    <h1>Titulo 1</h1>

    <ul>
  • </p>Partidos
  • Botines y camisetas
  • Juegos
  • Jugadores
    </div>
    <h1>Esta es la zona principla de la pajina</h1>


    La zona principal de la pajina se puede usar para muchas cosas como,por ejemplo
    acceder a la seccion partidos, botines y camisetas, juegos y jugadores. En cada
    parte hay un monton de cosas buenas, ya vas a ver.</p>
    <h2>Gracias</h2>


    Espero que les guste. Gracias por visitar mi web.Nos vemos otro dia y no se olviden
    de volver por favor. </p></div>
    <div id="pie">Este es el pie de la pagina</div>
    <div id="curva-inferior"></div>
    </body>
    </html>

    Y esta es mi estilos-general.css:

    *{margin:0px;padding:0px;border:0px}
    #cabecera{border-left:1px solid black;border-right:1px solid black;height:85px}
    #navegacion{border-top:2px solid green;border-left:2px solid green;border-right:2px solid green;background-image:url(objetos/barra navegacion 2.jpg);height:35px;width:800px;background-repeat:no-repeat}
    #navegacion li{float:left;list-style:none;color:green;margin:0px 10px 0px 10px}
    #contenido{background-image:url(stripe.png);height:1000px;border-left:2px solid green;border-right:2px solid green;border-bottom:2px solid green;padding:0px;font-color:white}
    #pie{background-color:white;border-top:1px solid black;border-right:1px solid black;border-left:1px solid black}
    #global{width:800px;margin:4px auto}
    body{text-align:center;color:white}
    #menu{background-image:url(green.jpg);width:150px;height:200px;float:left;text-align:left;margin:3px 10px 3px 3px}
    #menu li{list-style:none;margin:4px 0px 4px 6px}
    a{color:green;font-size:1.1em;text-decoration:none;block}
    a:link{}
    a:visited{background-image:url(stripe.png);width:100px;height:30px}
    a:hover{color:red;text-decoration:none;display:block;background-image:url(stripe.png);width:100px;height:30px}
    a:active{}
    p{text-align:justify}
    #contenido p{padding:5px 10px 5px 10px;text-indent:15px}
    h1{font-size:1.2em;color:green;font-weight:bold;text-decoration:underline;text-align:center}
    h2{font-size:1.1em;color:green;font-weight:bold;text-decoration:none;text-align:center}
    {border:1px solid black}
    #curva-superior{background-image:url(objetos/curva-superior.gif);background-repeat:no-repeat;
    width:800px;height:12px;overflow:hidden}
    #curva-inferior{background-image:url(objetos/curva-inferior.gif);background-repeat:no-repeat;
    width:800px;height:12px;overflow:hidden}
    #logotipo{background-image:url(logo.jpg);width:799px;height:80px;background-repeat:no-repeat}

    gracias por ayudar!!!!!
  • te falta poner

    #navegacion ul {text-color:#ffffff;margin-left: 50px;list-style:none }
    en la hoja de estilos.

    Y lo que puse en rojo en la plantilla

    <div id="navegacion"><ul>
  • Seccion 1
  • Seccion 2
  • Seccion 3
  • Seccion 4