aspecto del menu

He acabado la 4ª lección del curso paso a paso pero el aspecto del menu no es el que aparece en el ejemplo ... podeis ayudarme? adjunto parte de la plantilla y estilo general. La dir de la página es franciscorimada.atwebpages.com

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=iso-8859-1" http-equiv="Content-Type">
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>

<div id="cabecera">
<div id="logotipo">
<a href="index.html">
[contenido no disponible]
</a>
</div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">
<ul>
  • Sección 1
  • Sección 2
  • Sección 3
  • Sección 4

    </div>

    <div id="contenido">

    <div id="menu">
    <h1>Título de Sección 1</h1>
    <ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3
  • Enlace 4
    </div>

    <h1>Esta será la zona principal de la web</h1>


    Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
    <h2>Y este es el tercer párrafo.</h2>

    En pocas lecciones aprenderé a darle margenes para separarlos unos de otros, e incluso hacerles sangrías por la izquierda
    a la primera línea, que queda mucho mejor.</p>


    Anda, fijate! salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos alineados a la izquierda, o justificados. Así esto parece una poesía! Je je je</p>
    </div>

    <div id="pie">
    <div id="pieuno">
    <ul>
  • Foro Ejemplo
  • Contactos
  • Nos enlazan
    </div>
    <div id="piedos">pie dos</div>
    <div id="pietres">
    <ul>
  • Directorio
  • TopSite
  • Mapa de la Web
    </div>
    </div>

    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>

    *{margin:0px ; padding:0px ; border:0px}
    body {text-align: center}
    #cabecera {background-color:white ; border-left: black 1px solid ; border-right: black 1px solid }
    #navegacion {background-color: gray ; border:black 1px solid}
    #contenido {background-color: orange ;border-left:black 1px solid ; border-right:black 1px solid}
    #contenido p {padding: 5px 10px 5px 10px;text-indent:15px}
    #pie {background-color: white ; border-left:black 1px solid;border-right:black 1px solid;border-top:black 1px solid}
    #global {width: 800px ; margin: 4px auto}
    #menu {background-color:yellow;width 150px;float:left;text-align:left;margin:3px 10px 3px 3px}
    #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:silver}
    a:active {}
    p{text-align: justify}
    h1{font-size: 1.2em;color:blue;font-weight:bold;text-decoration:underline;text-align:center}
    h2{font-size: 1.1em;color:blue;font-weight:bold;text-decoration:none;text-align:center}
    #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}
  • Te falta codigo, no lo pusiste todo. Haz el css de nuevo, es lo mejor, en mi opinion.
    Ahora bien, respeta el orden en el codigo. Se lee de arriba a abajo, de izquierda a derecha.