Esto es el Codigo de mi estilo_general.css
body {
background:url(../imagen/fondo/caramaya.jpg) fixed center no-repeat;/*azul de fondo*/
margin:2px;
padding:2px;
}
#contenedor {
width:1200px;
margin:auto;
border:#000000 2px solid;
background:url(../imagen/fondo/body.png);
}
#cabecera {
width:1200px;
margin:auto;
clear:both;
}
/*MENU HORIZONTAL DESPLEGABLE JQUERY ANIMADO*/
/* menu::base */
#menu {
height: 52px;
padding-left: 6px;/*tamaño de la Isquierda*/
background:url(../imagen/img_menu/left.png) no-repeat;
_background:url(../imagen/img_menu/left.gif) no-repeat;
width:auto;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
#menu ul.menu {
padding-right: 6px;/*tamaño de la Derecha*/
background:url(../imagen/img_menu/right.png) no-repeat right 0;
_background:url(../imagen/img_menu/right.gif) no-repeat right 0;
}
#menu li {
position: relative;
margin: 0;
padding: 0 0px 0 0;
display: block;
float: left;
z-index: 9;
width: auto;
}
#menu ul ul li {
z-index: 9;
}
#menu li div {
list-style: none;
float: left;
position: absolute;
z-index: 11;
top: 52px;
left: 0;
visibility: hidden;
width: 180px;
margin: 0px 0 0 -4px;
padding: 0;
background:url(../imagen/img_menu/subsubmenu-top.png) no-repeat 0px 0;
_background:url(../imagen/img_menu/subsubmenu-top.gif) no-repeat 0px 0;
}
#menu ul ul {
z-index: 12;
padding: 0px 4px 10px 4px;
background:url(../imagen/img_menu/submenu-bottom.png) no-repeat 0px bottom;
_background:url(../imagen/img_menu/submenu-bottom.gif) no-repeat 0px bottom;
margin: 10px 0 0 0;
}
#menu li:hover>div {
visibility: visible;
}
#menu a {
position: relative;
z-index: 10;
height: 50px;
display: block;
float: left;
line-height: 50px;
text-decoration: none;
margin-top: 1px;
white-space: nowrap;
width: auto;
padding-right:5px;
text-align:center;
}
#menu span {
margin-top: 2px;
padding-left: 15px;
color: #fff;
font: normal 11px verdana,Arial, Tahoma,Century gothic, sans-serif;
background: none;
line-height: 50px;
display: block;
cursor: pointer;
background-repeat: no-repeat;
background-position: 95% 0;
text-align: center;
}
/*Fin...*/
/* menu::level1 */
#menu a {
padding: 0 10px 0 0;
line-height: 50px;
height: 52px;
margin-right: 5px;
_margin-right: 1px;
background: none;
text-transform: uppercase;
}
#menu a:hover {
background:url(../imagen/img_menu/selected-right-sub.png) no-repeat right -1px;
}
#menu a:hover span {
background:url(../imagen/img_menu/selected-left-sub.png) no-repeat 0 -3px;
}
#menu li.current a,
#menu ul.menu>li:hover>a{
background:url(../imagen/img_menu/selected-right-sub.png) no-repeat right -1px;
}
#menu li.current a span,
#menu
ul.menu>li:hover>a span {
background:url(../imagen/img_menu/selected-left-sub.png) no-repeat 0 -3px;
}
#menu ul.menu>li:hover>a
span {
color: #258B03;
}
/*#menu li { }
#menu li.last { background: none; }*/
/*Fin...*/
/* menu::level2 */
#menu ul ul li {
background: none;
padding: 0;
}
#menu ul ul a {
padding: 0px;
height: auto;
float: none;
display: block;
line-height: 25px;
font-size: 11px;
color: #fff;
z-index: -1;
padding-left: 5px;
white-space: normal;
width: 152px;
margin: 0 8px;
text-transform: none;
}
#menu ul ul a span {
padding: 0 5px;
line-height: 25px;
font-size: 11px;
}
#menu li.current ul a,
#menu li.current ul a
span {
background:none;
}
#menu ul ul a:hover {
background:none;
background-color: #092909;
}
#menu ul ul a:hover
span {
background:none;
color: #258B03;
}
#menu ul ul a.parent {
background:url(../imagen/img_menu/submenu-pointer.png) no-repeat right bottom;
_background-image:url(../imagen/img_menu/submenu-pointer-hover.gif);
}
#menu ul ul a.parent
span {
background:none;
}
#menu ul ul
a.parent:hover {
background:url(../imagen/img_menu/submenu-pointer.png) no-repeat right bottom;
_background:url(../imagen/img_menu/submenu-pointer-hover.gif) no-repeat right bottom;
background-color: #092909;
}
#menu ul ul
a.parent:hover span {
background:none;
}
#menu ul ul span {
margin-top: 0;
text-align: left;
}
#menu ul ul li.last { background: none; }
#menu ul ul li {
width: 100%;
}
/*FIN...*/
/* menu::level3 */
#menu ul ul div {
width: 180px;
padding: 0;
margin: -62px 0 0 165px !important;
}
#menu ul ul ul {
padding: 10px 4px 0 4px;
}
#menu ul ul div li {
position:relative;
top:-10px;
}
/*FIN...*/
/* lava lamp */
#menu li.back {
background:url(../imagen/img_menu/selected-left-sub.png) no-repeat 0 0;
background:
width: 5px;
height: 52px;
z-index: 8;
position: absolute;
padding: 0;
margin: 0px 0 0 0;
}
#menu li.back .left {
padding:0;
width:auto;
background:url(../imagen/img_menu/selected-right-sub.png) no-repeat right 0;
height: 52px;
margin: 0 0 0 5px;
float: none;
position: relative;
top: 0;
left: 0;
visibility: visible;
}
/*FIN...*/
/*FIN MENU HORIZONTAL DESPLEGABLE JQUERY ANIMADO*/
#cuerpo {
width:1200px;
overflow:hidden;
height:auto;
}
#lateral_left {
width:250px;
background-color:#9933FF;/*Color Violeta Lateral Isquierdo*/
height:300px;
float:left;
}
#contenido_center {
width:700px;
background-color:#FFFFFF;/*Color blanco Centro*/
height:300px;
float:left;
}
#lateral_right {
width:250px;
background-color:#CC3300;/*Color naranja Lateral derecho*/
height:300px;
float:right;
}
#pie_pagina {
height:50px;
background-color:#330000;/*Color Violeta Oscuro pie de pagina*/
}
Este es el Codigo de mi Jquery
y les dejo el lins de la imagen:
Código PHP:
Ver original
[IMG]http://l4c.me/fotos/marivera1256/menu-horizontal-jquery/sizes/o[/IMG]
porfavor les agradesco a las personas que son solidario bueno gracias y muchas benciones para todos cudts