Cómo crear un menú de navegación de dos o varios niveles usando CSS puro

Probé personalmente si el siguiente código puede implementar un menú de navegación de dos o varios niveles.

lt;stylegt;

lt;! --

* {margen: 0px; relleno: 0px;}

cuerpo {desbordamiento: tamaño de fuente: 12px; familia de fuentes: Arial, Helvetica, sans-serif ;color: #000; }

a {tamaño de fuente: 12px; familia de fuente: Arial, Helvetica, sans-serif; color: #000;

.menu {posición: relativa;; ancho: 1000px; color de fondo: #000;}

.ancho: 1000px; color de fondo: #360;}

.menu ul {list-style-type: none;}

.menu li {float: left; posición: relativa;}

.

.menu ul li: hover ul,

.menu ul a: hover ul{visibilidad: visible;}

.menu a{display: block background: #360; relleno: 2px 10px; color: #fff; texto-d-display: bloque; fondo: #360; relleno: 1px sólido #000;}

.menu a: hover{fondo: #690; color: #000;}

.menu ul ul,

. menú ul ul li {claro: ambos; alineación de texto: izquierda;}

.menu ul li a{pantalla: ancho: 100px alto: 15px;}

.menu ul ul li a：hover{fondo: #690;}

--gt;

lt;/stylegt;

lt;bodygt ;

lt;div class="menu"gt;

lt;ulgt;

lt;ligt;lt;a href="#"gt; menú_primer_nivel_01

lt;! --[SI IE 7]gt;lt;! --gt;lt;/agt;lt;!--lt;![endif]--gt;

lt;! --[if lte IE 6]gt;lt;tablegt;lt;trgt;lt;tdgt;lt;![endif]--gt;

lt;ulgt;

lt;ligt;lt;a href="#"gt;secundario_menu_01lt;/agt;lt;/ligt;

lt;ligt;lt;a href="#"gt;secundario_menu_02lt;/a

gt;lt;/ligt;

lt;/ulgt;

lt;! --[si lte IE 6]gt;lt;/tdgt;lt;/trgt;lt;/tablegt;lt;/agt;lt;;! [endif]--gt;

lt;/ligt;

lt;/ulgt;

lt;/divgt;

lt;/bodygt;