Menú vertical de una línea con submenús. Pure CSS

Tengo un sitio web feo con una barra de navegación vertical. http://jsfiddle.net/ZuC2W/ Por favor, ayúdame a editar el código para que la barra de navegación se vea en este sitio web: http://cssmenumaker.com/menu/slabbed-accordion-menu Quiero decir, los submenús aparecen debajo de los botones todo el menú tiene una línea y está ubicado en ese rectángulo rojo.

HTML:

    Title       

CSS:

 html, body { background:#78C2A9; margin: 0 0 0 0; } #window { height:630px; width: 1200px; margin: 20px auto 0 auto; padding: 0; background: orange; } #nav_wrap { width: 150px; height: 630px; margin: 0; position: absolute; background-color: #E95644; } #navigation { font-size:0.75em; width:150px; } #navigation ul { margin:0px; padding:0px; } #navigation li { list-style: none; } ul.top-level { background:#666; } ul.top-level li { border-bottom: #fff solid; border-top: #fff solid; border-width: 1px; } #navigation a { color: #fff; cursor: pointer; display:block; height:25px; line-height: 25px; text-indent: 10px; text-decoration:none; width:100%; } #navigation a:hover{ text-decoration:underline; } #navigation li:hover { background: #f90; position: relative; } ul.sub-level { display: none; } li:hover .sub-level { background: #999; border: #fff solid; border-width: 1px; display: block; position: absolute; left: 75px; top: 5px; } ul.sub-level li { border: none; float:left; width:150px; } 

Una manera rápida sería eliminar algunos CSS de su código existente. La última statement y todas las referencias a la position: absolute , en este caso.

DEMO http://jsfiddle.net/ZuC2W/1/