- Menu 00

Menu 00

He puesto éste código para todos aquellos WebMaster que deseen colocar un menu horizontal desplegable, modificable y que funcione con el navegador Tested in IE6, IE7, Firefox, Opera, Netscape, Mozilla y Safari (PC) (ya que el menu desplegable de didita por alguna razon no me funcionaba con algunos navegadores). Primero desir que el codigo no es para nada sensillo, y para todo aquel que quiera implementarlo en su web debera tener conocimientos del lenguaje CSS o sino está la posibilidad que su menu no le funcione.

Bueno acá les va el código, modifiquenlo a su pinta:

Esto va en Texto por debajo de la Página:
<style type="text/css">
body
{font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;}

#marco
{width: 98%;
margin:10px 0;
padding:0px;
text-align: left;}

.preload2
{background: url( URL Fondo Mhover);}

.menu2
{padding:0;
margin:0;
margin-bottom:0;
list-style:none;
height: 25px;
background:#fff url(URL Fondo M) repeat-x;
position:relative;
font-family:arial, verdana, sans-serif; }

.menu2 li.top
{display:block; float:left; position:relative;}

.menu2 li a.top_link
{display:block;
float:left;
height: 25px;
margin-left:6px;
line-height:25px;
color:#Letra M;
text-decoration:none;
font-size:11px;
font-weight:bold;
padding:0 0 0 6px;
cursor:pointer;}

.menu2 li a.top_link span
{float:left;
display:block;
padding:0 10px 0 6px;
height:40px;}

.menu2 li a.top_link span.down
{float:left;
display:block;
padding:0 10px0 6px;
height:25px;
/*background:url(prodrop2/down.gif) no-repeat right top;*/}

.menu2 li a.top_link:hover
{color:#fff; background:url( URL Fondo Mhover);}

.menu2 li a.top_link:hover span
{background:url( URL Fondo Mhover)}

.menu2 li a.top_link:hover span.down
{background:url( URL Fondo Mhover)}

.menu2 li:hover > a.top_link
{color: #Letra Mhover;
background:url(URL Fondo Mhover);}

.menu2 li:hover > a.top_link span
{background:url( URL Fondo Mhover);}

.menu2 li:hover > a.top_link span.down
{background:url( URL Fondo Mhover);}

.menu2 table
{border-collapse:collapse;
width:0;
height:0;
position:absolute;
top:0;
left:0;}

.menu2 a:hover
{visibility:visible;}

.menu2 li:hover
{position:relative; z-index:200;}

.menu2 ul,
.menu2 :hover ul ul,
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul
{position:absolute;
left:-9999px;
top:-9999px;
width:0;
height:0;
margin:0;
padding:0;
list-style:none;}

.menu2 :hover ul.sub
{left:6px;
top: 25px;
background: #fondo L1;
padding:0;
/*border:1px solid #1E8BB5;
white-space:nowrap;*/
width:auto;
height:auto;
font-weight:normal;}

.menu2 :hover ul.sub li
{display:block;
/*height:20px;*/
position:relative;
float:left;
width:160px;
border-bottom:1px solid #Borde L1,2 inf ;
border-left:1px solid #Borde L1,2 izq;
border-right:1px solid #Borde L1,2 der;
margin-bottom:0;}

.menu2 :hover ul.sub li a
{display:block;
height:auto;
font-size:11px;
padding:4px 3px;
line-height:1;
color: #Letra L1,2;
text-decoration:none;}

.menu2 :hover ul.sub li a.fly
{background: #fondo L1 url(URL VIÑETA) no-repeat 150px 6px;}

.menu2 :hover ul.sub li a:hover
{background: #fondo L1,2hover;
color:#Letra L1,2hover;}

.menu2 :hover ul.sub li a.fly:hover
{background: #fondo L1hover url(URL VIÑETA) no-repeat 150px 6px;}

.menu2 :hover ul li:hover > a.fly
{background: #fondo L1}

.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:160px; top:-1px;
background: #fff;
padding:0;
/* white-space:nowrap; */
width:auto;
z-index:300;
height:auto;}

.menu2 :hover ul.sub li ul
{border-top:1px solid #Borde L2 sup;
background: #fondo L2;
z-index:300;}
</style>

Simbologia:
CELESTE:Éste es el ancho de tu menu horizontal
ROJO: Son las url de tus imagenes
VERDE CLARO: Es el alto de tu menu horizontal
VERDE: Es el color de los bordes
NARANJO: Es el fondo de lo que se desplega
AZUL: Es el color de letra
ROSA: Es La ubicación de tu menú horizontal

Medida Recomendada:
URL FONDO M DER-IZ:3x25
URL FONDO M:1x25
URL FONDO MHOVER:1x25

Y ESTE ES EL CODE PARA QUE COMIENCES A CREAR TU MENU:
<div style="position:absolute;left:0px;top:140px;">
<div id="marco">
<span class="preload2"></span>

<ul class="menu2">
<img src="URL FONDO IZ" align="left" />
<img src="URL FONDO DER" align="right"/>

<li class="top"><a href="#" id="Menu1" class="top_link"><span class="down">Menu1</span>
</a>
<ul class="sub">
<li><a href="#">Link 1.1</a></li>
<li><a href="#">Link 1.2</a></li>
<li><a href="#">Link 1.3</a></li>
<li><a href="#">Link 1.4</a></li>
</ul>

</li>

<li class="top"><a href="#" id="Menu2" class="top_link"><span class="down">Menu2</span>
</a>
<ul class="sub">
<li><a href="#">Link 2.1</a></li>
<li><a href="#">Link 2.2</a></li>
<li><a href="#">Link 2.3</a></li>
<li><a href="#">Link 2.4</a></li>
</ul>

</li>

<li class="top"><a href="#" id="Menu3" class="top_link"><span class="down">Menu3</span>
</a>
<ul class="sub">
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>

<li class="mid"><a href="#" class="fly">Link 3.3
</a>
<ul>
<li><a href="#">Link 3.3.1</a></li>
<li><a href="#">Link 3.3.2</a></li>
<li><a href="#">Link 3.3.3</a></li>
<li><a href="#">Link 3.3.4</a></li>
</ul>

</li>

<li class="mid"><a href="#" class="fly">Link 3.4
</a>
<ul>
<li><a href="#">Link 3.4.1</a></li>
<li><a href="#">Link 3.4.2</a></li>
<li><a href="#">Link 3.4.3</a></li>
<li><a href="#">Link 3.4.4</a></li>
</ul>

</li>

</ul>

</li>

</ul>

</div>
</div>

Simbologia: