Problema con la posición del menú

[Distriker]

Hola Mik, he echo lo que te dije, apliqué el menú de ejemplo tuyo, pero tengo un problemilla (no paro de tener problemas). La opción 5 se va para abajo, mira en la web, lo he intentado corregir corrigiendo la posición pero no me sale

El codigo HTML es exactamente el de tu menú, aquí te dejo el DIV de la cabecera con el del menú dentro:

Código HTML:

<div id="cabecera">

<div id="menu">

<ul>
  <li class="nivel1"><a href="http://www.forosdelweb.com" class="nivel1">Opción 1</a>
<!--[if lte IE 6]><a href="http://www.forosdelweb.com" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
    <ul class="uno">
        <li><a href="#">Opción 1.1</a></li>
        <li><a href="#">Opción 1.2</a></li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>

  <li class="nivel1"><a href="#" class="nivel1">Opción 2</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
    <ul class="dos">
        <li><a href="#">Opción 2.1</a></li>
        <li><a href="http://www.google.es">Opción 2.2</a></li>
        <li><a href="#">Opción 2.3</a></li>
        <li><a href="#">Opción 2.4</a></li>

        <li><a href="#">Opción 2.5</a></li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="#" class="nivel1">Opción 3</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
    <ul class="tres">
        <li><a href="#"></a></li>
        <li><a href="#">Opción 3.1</a></li>

        <li><a href="#">Opción 3.2</a></li>
        <li><a href="#">Opción 3.3</a></li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="#" class="nivel1">Opción 4</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
    <ul class="cuatro">
        <li><a href="#"></a></li>

        <li><a href="#">Opción 4.1</a></li>
        <li><a href="#">Opción 4.2</a></li>
        <li><a href="#">Opción 4.3</a></li>
        <li><a href="#">Opción 4.4</a></li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="#" class="nivel1">Opción 4</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
    <ul class="cinco">
        <li><a href="#"></a></li>

        <li><a href="#">Opción 4.1</a></li>
        <li><a href="#">Opción 4.2</a></li>
        <li><a href="#">Opción 4.3</a></li>
        <li><a href="#">Opción 4.4</a></li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</div>

                <h1>Bienvenido a Betaconsolas.com</h1>
                <h2>:D:D:D</h2>

</div> 

Y al CSS le he modificado el atributo Width para acoplarla al menú y agrandar el DIV Centro, mira como ha quedado:

Código CSS:

body {
    text-align: center ;
    background-color: #C9D0E9;
  }
 
 
#cabecera {
    background-color: #00C40D ;
    margin-bottom: 5px;
  }
 
#contenido {
    width: 940px ;
margin: 0 auto 0 auto ;
    background-color: #E2F0DC ;
  }
 
 
#sidebar-izquierda {
    width: 110px ;
    float: left ;
    padding: 25px ;
    background-color: #FFF200;
  }
 
 
#sidebar-derecha {
    width: 110px ;
    float: right ;
    padding: 25px ;
    background-color: #FFF200;
  }
 
 
#centro {
    width: 590px ;
    background-color: #5100FF ;
    float: left ;
    text-align: center;
    margin-left: 15px ;
    margin-right: 15px ;
    margin-bottom: 15px;
  }
 
 
#footer {
    background-color : #FF0004;
    border-left-color : #090909;
    border-left-width : 5px;
    clear : both;
    font-style : italic;
    text-align : center;
  }
 
 
#menu {  text-align: center;
font-size: 0.7em;
width: 820px;
margin: 20px auto;
position: relative;
}
#menu ul { list-style-type: none;}
 
#menu ul li.nivel1 { float: left;
width: 162px;
margin-right: 2px;
position: relative;
}
#menu ul li { float: left;}
 
#menu ul li a {display: block;
text-decoration: none;
color: #fff;
background-color: #399;
border: solid 1px #fff;
padding: 8px;
position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
color: #000;
position: relative;
border-bottom: solid 1px #6CC;
}
#menu ul li a.nivel1 {display: block!important;display: none;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;width: 816px;border: solid 1px #fff;border-top: none;background-color: #6CC;
}
#menu ul li ul li a {width: 160px;
padding: 6px 0px 8px 0px;
border: none;
background-color: #6CC;
}
#menu ul li ul li a:hover {
position: relative;
text-decoration: underline;
border-bottom: none;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
ul.uno {left: 0px;}
ul.dos {left: -164px;}
ul.tres {left: -328px;}
ul.cuatro {left: -492px;}
ul.cinco {left: -656px;}
 

¿Qué tendría que modificarle para que el menú se quede acoplado correctamente?

Por cierto, me podrías explicar para que sirve ese atributo table.falsa, se que es para la etiqueta <table class="falsa">, ¿pero para que sirve esa etiqueta?

Saludos