<div style="background: url('http://img-fotki.yandex.ru/get/9931/50114850.68c/0_f64a9_ae7a556e_orig.png') top left no-repeat; padding-top: 160px; height: 440px; width: 750px;">
<div style="width: 350px; height: 270px; padding: 0 200px 0 200px; font: 40px Parchment; font-style: italic; color: #290d42; overflow: auto; text-align: center;"><br /> <strong>Flores silvestres del campo y agua de laguna clara, as&iacute; tengo comparados los colores de tu cara.<br /><br />Aunque est&eacute; en medio del desierto, cuando t&uacute; llegas, la vida florece a mi alrededor.<br /><br />Tus ojos son gotas de roc&iacute;o en la hermosa flor de tu rostro.<br /><br />Dicen que las flores con el tiempo se marchitan, en cambio vos cuanto mas a&ntilde;os, m&aacute;s bonita.<br /><br /></strong></div>
</div>

2 niveles 6º opción

 <!------------------------------------------------------------------------->
<div id="principal">Menú principal
<div id="menu">
<ul>
  <li class="nivel1 primera"><a href="#" class="nivel1">Opción 1</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
	<ul>
		<li class="primera"><a href="http://www.google.es">Opción 1.1</a></li>
		<li><a href="http://www.idplus.org">idplus.org</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>
		<li class="primera"><a href="#">Opción 2.1</a></li>
		<li><a href="#">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="http://www.idplus.org">idplus.org</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>
		<li class="primera"><a href="#">Opción 3.1</a></li>
		<li><a href="#">Opción 3.2</a></li>
		<li><a href="http://www.idplus.org">idplus.org</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>
		<li class="primera"><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="http://www.idplus.org">idplus.org</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="#" class="nivel1">Opción 5</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
	<ul>
		<li class="primera"><a href="#">Opción 5.1</a></li>
		<li><a href="#">Opción 5.2</a></li>
		<li><a href="http://www.idplus.org">idplus.org</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</div>

CSS

* { margin: 0px;
padding: 0px; outline: 0;
}
html, body { width: 100%;}

body { background: #366;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#principal {width: 144px;
color: #fff;
background-color: #399;
border: solid 1px #fff;
padding: 8px;
position: relative;
margin: 20px;
font-size: 0.9em;
text-align: center;
cursor: pointer;
}
#principal:hover {background-color: #0000CA;}

#principal:hover #menu {display: block;
}

#menu {  text-align: center;
font-size: 0.85em;
width: 320px;
display: none;
position: relative;
padding-top: 10px;
left: -9px;
margin-bottom: -10px;
}


#menu ul { list-style-type: none;border: 0;
}
#menu ul li.nivel1 { 
width: 162px;
}
#menu ul li.primera { border-top: solid 1px #FFF;
}
#menu ul li a {display: block;
text-decoration: none;
color: #fff;
background-color: #399;
border: solid 1px #fff;
border-top: none;
padding: 8px;
position: relative;
}
#menu ul li:hover {position: relative;
background-color: #6CC;
color: #000;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
color: #000;
position: relative;
}
#menu ul li a.nivel1 {display: block!important;display: none;
position: relative;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;left: 161px;top:-1px!important;top: -31px;
}
#menu ul li ul li a {width: 150px;
background-color: #6CC;
color: #000;
}
#menu ul li ul li a:hover {position: relative;
background-color: #399;
color: #FFF;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}

2º niveels 4º opción

<div id="menu">
<ul>
  <li class="nivel1 primera" tabindex="1"><span class="nivel1">Opción 1</span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
	<ul>
		<li class="primera"><a href="http://www.google.es">Opción 1.1</a></li>
		<li><a href="http://www.idplus.org">idplus.org</a></li>
	</ul>
<!--[if IE]></td></tr></table></a><![endif]-->
  </li>
  <li class="nivel1" tabindex="2"><span class="nivel1">Opción 2</span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
	<ul>
		<li class="primera"><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="http://www.idplus.org">idplus.org</a></li>
	</ul>
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1" tabindex="3"><span class="nivel1">Opción 3</span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
	<ul>
		<li class="primera"><a href="http://www.google.es">Opción 3.1</a></li>
		<li><a href="#">Opción 3.2</a></li>
		<li><a href="http://www.idplus.org">idplus.org</a></li>
	</ul>
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1" tabindex="4"><span class="nivel1">Opción 4</span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
	<ul>
		<li class="primera"><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="http://www.idplus.org">idplus.org</a></li>
	</ul>
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1" tabindex="5"><span class="nivel1">Opción 5</span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
	<ul>
		<li class="primera"><a href="#">Opción 5.1</a></li>
		<li><a href="#">Opción 5.2</a></li>
		<li><a href="http://www.idplus.org">idplus.org</a></li>
	</ul>
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>

CSS

/*--------- Menu CSS --------------*
* { margin: 0px;
padding: 0px; outline: 0;
}
html, body { width: 100%;}

body { background: #366;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#menu {  text-align: center;
font-size: 0.7em;
width: 320px;
margin: 20px;
}
#menu ul { list-style-type: none;
}
#menu ul li.nivel1 { 
width: 162px;
}
#menu ul li.primera { border-top: solid 1px #FFF;
}
#menu ul li a, #menu ul li span {display: block;
text-decoration: none;
color: #fff;
background-color: #399;
border: solid 1px #fff;
border-top: none;
padding: 8px;
position: relative;
}
a:active {position: relative;
}
#menu ul li a:active {background-color: #6CC;
color: #000;
border-bottom: solid 1px #6CC;
position: relative;
}
#menu ul li span.nivel1 {display: block;
}
#menu ul li:hover span.nivel1 {cursor: pointer;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li a:active ul {display: block;
position: relative;width: 162px;background-color: #6CC;
}
#menu ul li a:link:hover ul {display: none;
}
#menu ul li a:active:hover ul  {display: block;
}
#menu ul li ul li a {width: 160px;
padding: 6px 0px 8px 0px;
border: none;
border-top:  solid 1px #fff;
background-color: #3AB7CB;
font-weight: normal;
}
#menu ul li ul li a:hover {
position: relative;
text-decoration: underline;
border-bottom: none;
color: #000;
background-color: #359BB8;
}
#menu ul li ul li.primera {border-top: none;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}

Horizontal 2 niveles 3º opción

<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 id="uno">
		<li><a href="http://www.idplus.org">idplus.org</a></li>
		<li><a href="#">Opción 1.1</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 id="dos">
		<li><a href="http://www.idplus.org">idplus.org</a></li>
		<li><a href="#">Opción 2.4</a></li>
		<li><a href="#">Opción 2.3</a></li>
		<li><a href="#">Opción 2.2</a></li>
		<li><a href="#">Opción 2.1</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 id="tres">
		<li><a href="http://www.idplus.org">idplus.org</a></li>
		<li><a href="#">Opción 3.2</a></li>
		<li><a href="#">Opción 3.1</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 id="cuatro">
		<li><a href="http://www.idplus.org">idplus.org</a></li>
		<li><a href="#">Opción 4.3</a></li>
		<li><a href="#">Opción 4.2</a></li>
		<li><a href="#">Opción 4.1</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="#" class="nivel1">Opción 5</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
	<ul id="cinco">
		<li><a href="http://www.idplus.org">idplus.org</a></li>
		<li><a href="#">Opción 5.2</a></li>
		<li><a href="#">Opción 5.1</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>

CSS

/*--------- Menu CSS --------------*/
* { margin: 0px;
padding: 0px; outline: 0;
}
html, body { width: 100%;}

body { background: #366;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#menu {  text-align: center;
font-size: 0.7em;
width: 820px;
margin: 200px auto;
}
#menu ul { list-style-type: none;}
#menu ul li.nivel1 { float: left;
width: 162px;
margin-right: 2px;
}
#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:hover {position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
color: #000;
position: relative;
}
#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;left: 0px;
}
#menu ul li ul li a {width: 160px;
padding: 6px 0px 8px 0px;
border-bottom-color: #000;
}
#menu ul li ul li a:hover {border-bottom-color: #000;
position: relative;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
ul#uno {top: -58px!important; top: -89px;}
ul#dos {top: -145px!important; top: -176px;}
ul#tres {top: -87px!important; top: -118px;}
ul#cuatro {top: -116px!important; top: -147px;}
ul#cinco {top: -87px!important; top: -118px;}

Horizontal 2 niveles 
Fuente

<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="http://www.idplus.org">idplus.org</a></li>
	</ul>
 <!--------------------------------------------->
  </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="http://www.idplus.org">idplus.org</a></li>
	</ul>
 <!--------------------------------------------->
</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="http://www.idplus.org">idplus.org</a></li>
	</ul>
 <!--------------------------------------------->
</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="http://www.idplus.org">idplus.org</a></li>
	</ul>
 <!--------------------------------------------->
</li>
  <li class="nivel1"><a href="#" class="nivel1">Opción 5</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
	<ul class="cinco">
		<li><a href="#"></a></li>
		<li><a href="#"></a></li>
		<li><a href="#">Opción 5.1</a></li>
		<li><a href="#">Opción 5.2</a></li>
		<li><a href="http://www.idplus.org">idplus.org</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
 

CSS

/*--------- Menu CSS --------------*/
 * { margin: 0px;
padding: 0px; outline: 0;
}
html, body { width: 100%;}

body { background: #366;
font-family: Verdana, Arial, Helvetica, sans-serif;
  text-shadow: 0 0 3px #FFf, 0 0 5px #fFF;
}
#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;
 text-shadow: 2px 2px 4px #000000;
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;}

CSS 2º opción

/*--------- Menu CSS --------------*/
* { margin: 0px;padding: 0px; outline: 0;
}
html, body { 
  width: 100%;}
body { 
  background: #366;
  font-family: Verdana, Arial, Helvetica, sans-serif;}
#menu {  
  font-size: 0.7em;margin: 20px;}
#menu ul { list-style-type: none;}
#menu ul li.nivel1 { width: 162px;}
#menu ul li { text-align: center;}
#menu ul li.primera { 
  border-top: solid 1px #FFF;}
#menu ul li a {display: block;
  text-decoration: none;color: #fff;
  background-color: #399;
  border: solid 1px #fff;border-top: none;padding: 8px 8px 9px;position: relative;}
#menu ul li:hover {
 position: relative;
 background- color: #6CC;color: #000;}
#menu ul li a:hover,
#menu ul li:hover a.nivel1 {
  background-color: #6CC;color: #000;
  position: relative;}
#menu ul li a.nivel1 {
  display: block!important;
  display: none;position: relative;}
#menu ul li ul {display: none;}
#menu ul li:hover > ul {
 display: block;position:  absolute;left: 161px;top:-1px;}
#menu ul li ul li a {
 width: 144px;background-color: #399;
 color: #FFF;position: relative;}
#menu ul li ul li a:hover {
  position: relative;
  background-color: #6CC;
  color: #000;}
#menu ul li a.nivel1ie {
  width: 144px;padding: 8px;}
#menu ul li a.subnivel {padding-bottom: 8px;}
#menu ul li a:hover ul.nivel2, 
#menu ul.nivel2 li a:hover ul.nivel3, 
#menu ul.nivel3 li a:hover ul.nivel4 {
display: block;position: absolute;left: 160px;top:-1px;}
table.falsa {
  border-collapse:collapse;border:0px;
  float: left;}

CSS 2aº opción

/*--------- Menu CSS --------------*/
* { margin: 0px;
padding: 0px; outline: 0;
}
html, body { width: 100%;}

body { background: #366;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#menu {  text-align: center;
font-size: 0.7em;
width: 820px;
margin: 20px auto;
}
#menu ul { list-style-type: none;}
#menu ul li.nivel1 { float: left;
width: 162px;
margin-right: 2px;
}
#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:hover {position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
color: #000;
position: relative;
}
#menu ul li a.nivel1 {display: block!important;display: none;
position: relative;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;left: 0px;
}
#menu ul li ul li a {width: 160px;
padding: 6px 0px 8px 0px;
border-top-color: #000;
}
#menu ul li ul li a:hover {border-top-color: #000;
position: relative;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}