Hola,
Si creas como contenedor de la capa de pie una capa que ocupe un width 100% de negro position fixed bottom 0 para que este al pie.
Dentro de esa capa otra con un ancho especifico en px(yo he puesto 980 como en la capa de arriba) con el fondo blanco
Dentro de esta a su vez el menu con fondo negro y floantando a la izquierda de la de 980px
Yo lo tendrías casí, lo único que luego te quedaría tb a la izquierda el fondo negro.
Pero si creas una capa blanca con clear both, width de 50% alineada a la izquierda y con posición relativa, pero digamos que la 'subes' con top para tapar el espacio negro que te quedaba del fondo de la capa principal tendrías algo parecido.
te paso el código, pero eso si, he puesto los estilos a pelo te toca indagar un poco el tema.
Es una solución un poco fea pero funcionar debe de funcionar por qué no.
Eso sí dependiendo del ancho de tu menu el ancho de la capa que sirve para 'tapar el negro' lo mismo lo tienes que reducir.
No sé si te gustará la idea y reconozco que es un poco fea, pero en fin te la dejo.
Código HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-1" />
<meta name="lang" content="es" />
<meta name="generator" content="editplus"/>
</head>
<body style="margin:0">
<div style="width:100%;background:black;padding-top:10px;padding-bottom:10px;overflow:auto;">
<div style="min-width:980px;width:980px;margin:0 auto">
<div style="float:right;padding-right:20px;color:#ffffff">
<a style="float:left;margin-left:10px;">menu1</a>
<a style="float:left;margin-left:10px;">menu2</a>
<a style="float:left;margin-left:10px;">menu3</a>
<a style="float:left;margin-left:10px;">menu4</a>
<a style="float:left;margin-left:10px;">menu5</a>
</div>
</div>
</div>
<div style="min-height:300px;height:300px">
</div>
<div style="position:fixed;bottom:0px;left:0px;max-height:28px;width:100%;visibility:visible;display:block;z-index:400;background-position:right center;overflow:hidden;background:black;">
<div style="position:relative;min-width:980px;width:980px;margin:0 auto;background:white;display:block;overflow:auto;">
<div style="float:right;padding-right:20px;color:#ffffff;background:black;padding-top:5px;;padding-bottom:5px;">
<a style="float:left;margin-left:10px;">menu6</a>
<a style="float:left;margin-left:10px;">menu7</a>
<a style="float:left;margin-left:10px;">menu8</a>
<a style="float:left;margin-left:10px;">menu9</a>
</div>
</div>
<div style="position:relative;clear:both;width:50%;margin:0 auto;background:white;float:left;min-height:100px;top:-40px;">
</div>
</div>
</body>
</html>
Salu2 ;)