Rodape fixo e Menu usando lista (sem Javascript)

Seguinte pessoal, utilizando algumas coisas que o MicoX nos apresentou aqui no fórum, aqui vai uma estrutura de página que monta menu(até 3 submenus) utilizando lista, deixa o rodapé fixo e normaliza as coisas para o layout ficar igual na maioria doas navegadores.

A página é composta por 3 arquivos:

• css_padrao.css é o arquivo onde faz a coisa toda acontecer, nem precisa editar ele
• estilo.css é o arquivo onde você deve definir as cores e fontes do menu, submenus, areas do site, etc, esse arquivo que você deve editar.
• index.htm é o site em sí, ele já vem com a estrutura básica.

Testei no FF3, IE7 e Safari3.1

Espero ajudar

css_padrao.css

/*********************************************************************/
/** NAO ALTERAR ESTE ARQUIVO *************************************/
/*********************************************************************/
/ INICIO DO CODIGO PARA PADRONIZAR PROPRIEDADES NOS NAVEGADORES /
/*********************************************************************/
/ Padronizacao do tamanho dos heads /
h1 { font-size: 250%; font-weight: normal;}
h2 { font-size: 200%; font-weight: normal;}
h3 { font-size: 150%; font-weight: normal;}
h4 { font-size: 120%; font-weight: normal;}
h5 { font-size: 110%; font-weight: normal;}
h6 { font-size: 100%; font-weight: bold;}

/ Padronizacao da propriedades de margens /

* {	margin: 0; padding: 0; outline: 0;
	font-weight: inherit; font-style: inherit;
	font-size: 100%; font-family: inherit;
	line-height: 1.1em; vertical-align: baseline
}

p { margin-bottom: 0.5em; }
ul, ol { margin-left: 1.5em; list-style-position: outside; }

hr { clear: both; float: none; width: 100%; }
html body hr { margin: -7px; display: block;} / HR tem uma altura extra misteriosa no IE */
a, img { border: none; }
img { vertical-align: middle;}

fieldset { display: block; border: 2px ridge #FFF; padding: 10px; } / fieldset não é block em todos /
li { vertical-align: top; line-height: 1.2em;} / IE: posição vertical do marcador no IE e espaço extra fantasma em lis/
li a { zoom: 1; line-height: 1.2em; } / complemento do anterior /
input[type=hidden]{ display: none !important; visibility: hidden !important;} / input hidden no FF /
button { border: 1px outset #AAA; }
legend { margin-bottom: 1.4em; } / Fixes incorrect styling of legend in IE6 fieldsets. /
label { display: block;}
table { border-collapse: separate; border-spacing: 0; }
caption, th, thead, tfoot { text-align: center; font-weight: bold; }
blockquote:before, blockquote:after,q:before, q:after { content: “”; }
blockquote, q { quotes: "" ""; }
pre { white-space: pre-wrap; / css-3 / white-space: -moz-pre-wrap !important; / FF 1999 /
white-space: -pre-wrap; / OP 4-6 / white-space: -o-pre-wrap; / OP 7 / word-wrap: break-word; / IE 5.5+ /
}
/*********************************************************************/
/* FIM DO CODIGO PARA PADRONIZAR PROPRIEDADES NOS NAVEGADORES ****/
/*********************************************************************/

/********************************************/
/ INICIO DO CODIGO PARA FIXAR O RODAPE /
/********************************************/
html, body { height:100%; }
* html #area_util { height: 100%; }
#area_util { position: relative; margin:0px auto; min-height:100%; text-align:left; border-width:0 1px; }
body { margin: 0px; padding: 0px; text-align: center; }
#cabecalho { left: 0px; right: 0px; width: auto; padding-top:1px; }
#corpo { left: 0px; right: 0px; width: auto; }
#rodape {left: 0px; right: 0px; width: auto; position: absolute; bottom: 0; }
/********************************************/
/* FIM DO CODIGO PARA FIXAR O RODAPE ****/
/********************************************/

/************************************/
/ INICIO DO CODIGO PARA O MENU /
/************************************/
/ Menus drop-down horizontal-vertical (hv) e vertical-vertical (vv) até 4 níveis /
/ by Micox - elmicox.blogspot.com - Ver. 2.0 - 20/02/08 - Creative Commons License /
.menu_horizontal, .menu_vertical { position: relative; margin: 0; padding: 0; display: block; zoom: 1; text-align: left;}
.menu_horizontal , .menu_vertical { margin: 0; padding: 0; list-style: none}
.menu_horizontal li , .menu_vertical li { position: relative; line-height: 1.2em; vertical-align: top }
.menu_horizontal a , .menu_vertical a { display: block; zoom: 1; line-height: 1.2em }
.menu_horizontal li ul, .menu_vertical li ul { position: absolute; visibility: hidden }
.menu_horizontal li:hover ul, .menu_vertical li:hover ul,
.menu_horizontal li.hover ul, .menu_vertical li.hover ul { visibility: visible }
.menu_horizontal li:hover ul ul, .menu_vertical li:hover ul ul,
.menu_horizontal li.hover ul ul, .menu_vertical li.hover ul ul { visibility: hidden }
.menu_horizontal li li:hover ul, .menu_vertical li li:hover ul,
.menu_horizontal li li.hover ul, .menu_vertical li li.hover ul { visibility: visible }
.menu_horizontal li li:hover ul ul, .menu_vertical li li:hover ul ul,
.menu_horizontal li li.hover ul ul, .menu_vertical li li.hover ul ul { visibility: hidden }
.menu_horizontal li li li:hover ul, .menu_vertical li li li:hover ul,
.menu_horizontal li li li.hover ul, .menu_vertical li li li.hover ul { visibility: visible }
/ características horizontal-vertical /
.menu_horizontal:after, .menu_horizontal.after { content: "."; line-height: 0px; clear: both; display: block; visibility: hidden}
.menu_horizontal li { float: left; }
.menu_horizontal li ul li { float: none; }
.menu_horizontal li ul li ul { position: absolute; left: 100%; top: 0; }
/ características vertical-vertical /
.menu_vertical { float: left; }
.menu_vertical li ul { left: 100%; top: 0; }
/************************************/
/* FIM DO CODIGO PARA O MENU ****/
/************************************/

/**************************************************/
/ INICIO DO CODIGO PARA O PSEUDOCLASS NO IE6 /
/**************************************************/
/ Micox Pseudo-class-css2 to IE (MXPC). Activate .hover and .first-child in IE 6 /
/ http://elmicox.blogspot.com/2008/03/ativando-hover-e-first-child-no-ie-6-um.html /

* html * { color: expression( (function(who){ if(!who.MXPC){
	who.MXPC = '1';
	if(who.nodeName != 'A'){
 who.onmouseenter=function(){ who.className += ' hover'};
 who.onmouseleave=function(){ who.className = who.className.replace(' hover','')}; }
	(who==who.parentNode.firstChild) ? who.className += ' first-child' : '';

} } )(this) , 'auto') }
/**************************************************/
/* FIM DO CODIGO PARA O PSEUDOCLASS NO IE6 ****/
/**************************************************/

estilo.css

/*******************************************************/
/ OBRIGATORIO TER ESSAS 5 AREAS PARA FIXAR O RODAPE: /
/ #area_util, #topo, #conteudo, #rodape e #rodapeTemp /
/*******************************************************/

#area_util {
	width: 780px; /* LARGURA DA AREA UTIL DO SITE */
	border: 0px
}
#cabecalho {
	height:100px;
	text-align:center;
	border: solid black 1px;
}
#corpo {
	text-align:center;
	border: 0px;
}
#rodape {
	height:20px; /* ALTURA DO RODAPE - Lembrar de alterar tambem no "rodapeTemp"(logo abaixo) */
	text-align:center;
	border: solid black 1px;
}

#rodapeTemp { /ESTA AREA DEVE TER SOMENTE UMA PROPRIEDADE: padding-bottom /
padding-bottom:20px; / Valor igual a altura(height) definida no "rodape"(logo acima). Obs.: tavez precise de algum ajuste se o rodape utilize bordas /
}

/*************************************/
/ CONFIGURACAO DO MENU HORIZONTAL /
/*************************************/
/ AREA DO MENU /

.menu_horizontal{
	background-color: red;
	border: solid red 1px;
}

/ ITENS DO MENU /
.menu_horizontal li {

	width: 100px;
	background-color: yellow;
	border: solid black 1px;
}

.menu_horizontal li a:hover {

	background-color: aqua;
}

/ AREA DO SUBMENU /
.menu_horizontal ul{

	background-color: red;
	border: solid red 1px;
}

/ ITENS DO SUBMENU /
.menu_horizontal li li{

	width: 100px;
	background-color: green;
	border: solid black 1px;
}

.menu_horizontal li li a:hover {

	background-color: aqua;
}

/***********************************/
/ CONFIGURACAO DO MENU VERTICAL /
/***********************************/
/ AREA DO MENU /

.menu_vertical{
	background-color: red;
	border: solid red 1px;
}

/ ITENS DO MENU /
.menu_vertical li {

	width: 100px;
	background-color: yellow;
	border: solid black 1px;
}

.menu_vertical li a:hover {

	background-color: aqua;
}

/ AREA DO SUBMENU /
.menu_vertical ul{

	background-color: red;
	border: solid red 1px;
}

/ ITENS DO SUBMENU /
.menu_vertical li li{

	width: 100px;
	background-color: green;
	border: solid black 1px;
}

.menu_vertical li li a:hover {

	background-color: aqua;
}

index.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="[http://www.w3.org/1999/xhtml"](http://www.w3.org/1999/xhtml) lang="pt-br" xml:lang="pt-br">
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="css_padrao.css" />
	<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
<div id="area_util">
	<div id="rodapeTemp">
 <div id="cabecalho">
 <h1>Topo</h1>
 </div>
 <div id="corpo">

 <div id="menu">
 <ul class='menu_horizontal'>
 <li>Sem link</li>
 <li><a href='#'>2</a></li>
 <li><a href='#'>3...</a>
 <ul>
 <li>31</li>
 <li><a href='#'>32</a></li>
 <li>33</li>
 </ul>
 </li>
 <li><a href='#'>4...</a>
 <ul>
 <li>41</li>
 <li><a href='#'>42</a></li>
 <li><a href='#'>43...</a>
 <ul>
 <li>431</li>
 <li><a href='#'>432...</a>
 <ul>
 <li>4321</li>
 <li><a href='#'>4322</a></li>
 </ul>
 </li>
 </ul>
 </li>
 <li>44</li>
 </ul>
 </li>
 </ul>
 <br />
 <ul class='menu_vertical'>
 <li>Sem link</li>
 <li><a href='#'>2</a></li>
 <li><a href='#'>3...</a>

 <ul>
 <li>31</li>
 <li><a href='#'>32</a></li>
 <li>33</li>
 </ul>
 </li>
 <li><a href='#'>4...</a>
 <ul>
 <li>41</li>
 <li><a href='#'>42</a></li>
 <li><a href='#'>43...</a>
 <ul>
 <li>431</li>
 <li><a href='#'>432...</a>
 <ul>
 <li>4321</li>
 <li><a href='#'>4322</a></li>
 </ul>
 </li>
 </ul>
 </li>
 <li>44</li>
 </ul>
 </li>
 </ul>
 </div>

 <div id="conteudo">
 conteudo<br />
 </div>
 </div>
	</div>

	<div id="rodape">
 Rodapé
	</div>
</div>
</body>
</html>