por IvanswebS™ Dom Nov 16, 2008 11:37 pm
Bueno Aqui les dejo un codigo para que tengas tu propio menu horisontal es muy buenos
Espreo que le sirva
Este Coigo lo pones en la parte de abajo de la web
| Código: |
- Código:
<table align="center" border="0" cellpadding="3" cellspacing="1" width="90%"><tr><td class="code"><style type="text/css">
body {font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0;}
#marco { width:921px; 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(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></td> </tr></table>
|
este codigo lo pones endonde quiera que balla tu menu
| Código: |
- Código:
<table align="center" border="0" cellpadding="3" cellspacing="1" width="90%"><tr><td class="code"><div id="marco">
<span class="preload2"></span>
<!--MENU-->
<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>
<!--[if gte IE
7]><!--></a><!--<![endif]--><!--[if lte IE
6]><table><tr><td><![endif]-->
<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>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="#" id="Menu2" class="top_link"><span class="down">Menu2</span>
<!--[if gte IE
7]><!--></a><!--<![endif]--><!--[if lte IE
6]><table><tr><td><![endif]-->
<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>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="#" id="Menu3" class="top_link"><span class="down">Menu3</span>
<!--[if gte IE
7]><!--></a><!--<![endif]--><!--[if lte IE
6]><table><tr><td><![endif]-->
<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
<!--[if gte IE
7]><!--></a><!--<![endif]--><!--[if lte IE
6]><table><tr><td><![endif]-->
<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>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="mid"><a href="#" class="fly">Link 3.4
<!--[if gte IE
7]><!--></a><!--<![endif]--><!--[if lte IE
6]><table><tr><td><![endif]-->
<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>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!-- FIN MENU--></td> </tr></table>
|
llegarse a ser fan de Foroactivo
» Day of the Dead
» El vuelo de los muertos vivientes
» Hotel sin salida
» Hostel 1 y 2
» Una noche para morir
» Scream 1 y 3
» Silent Hill
» Destino Final 1, 2 y 3