[Ovillo] Centrar menú con CSS y varios

Mie Abr 18 15:06:00 UTC 2007

Pego aquí las páginas directamente.

A ver si me podeis echar una mano porque llevo dos días dándole vueltas 
y no consigo encontrar los fallos :(

-------------------------------------
estilo.css
/* Hoja de estilo */

/* PAG PRINCIPAL */

body {
    font-family: "Trebuchet MS", Arial;
    font-size: 14px;
}

h4 {
    margin-top: 0px;
}

hr {
    border: 0;
    height: 1px;
    color: #999;
    background-color: #999;
}

#container {
    width: 100%;
    margin: auto;
    border: 0px solid;
}

#cabecera {
    height: 70px; 
    text-align: center;
    margin-bottom: 10px;
}

#menu {
    height: 30px;
/*    border-bottom: 1px solid #999; */
}

#cuerpo {
    padding-bottom: 0px;
/*    border-bottom: 1px solid #999;  */
    clear:left;
}

#pie {
    border-top: 1px solid #999;
    height: 30px;
    padding-top: 10px;
}

#separador {
    clear: both;
    height: 10px;
}

/*MENU DESPLEGABLE */
#nav, #nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#nav a {
    display: block;
    width: 8em;
}

#nav li {
    float: left;
    width: 8em;
    border: 1px solid #999;
    background: #eee;
    cursor: hand;
    margin: 0 20px 0 0;
}

#nav li ul {
    position: absolute;
    width: 8em;
    left: -999em;
}

#nav li:hover ul {
    left: auto;
}

#nav li:hover {
    color: #fff;
    background: #999;
}

#nav li:hover ul, #nav li.sfhover ul {
    left: auto;
}
/*FIN MENU PRINCIPAL */

#content {
    clear: left;
}

#nav li a {
    text-decoration: none;
    color: #000;
}

#nav li a:hover {
    padding: 0 0 0 0;
    color: #fff;
    background: #999;
    width: 60px;
}

----------------------------------------------------

index.php
<html>
<head>
<title>Para ovillo</title>
<link rel="STYLESHEET" type="text/css" href="estilo.css">
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" 
sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>
</head>
<body>
<div id="container">
    <div id="cabecera">
    <a href="index.php"><img src="imagenes/logo.jpg" border="0" /></a>
    </div>
    <div id="separador"></div>
    <div id="menu">
    <ul id="nav">
    <li>Menu 1
        <ul>
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>

        </ul>
    </li>
    <li>Menu 2
        <ul>
            <li><a href="">Prueba 1</a></li>
            <li><a href="">Prueba 2</a></li>
            <li><a href="">Prueba 3</a></li>

        </ul>
    </li>
    <li>Menu 3
        <ul>
            <li><a href="">Prueba 4</a></li>
            <li><a href="">Prueba 5</a></li>
            <li><a href="">Prueba 6</a></li>
        </ul>
    </li>
    </ul>
    </div>
    <div id="cuerpo">
        CUERPO PAGINA
    </div>
    <div id="separador"></div>
    <div id="pie">
    <center>PIE DE PAGINA</center>
    </div>
</div>
</body>
</html>
----------------------------------------

Lo dicho, gracias de antemano!