[SOLUCIONADO] Problema con menú desplegable

[ZonaGente]

Hola amigos de forosdelweb, tengo un problema en una página web hecha en joomla de un conocido, al parecer el menú desplegable no se abre solo al cargar la página, el caso es que no tengo ni idea de joomla y no se que puede ser, alguno de vosotros podría decirme ?

La web es http://lasedenoche.com/

PD: Veréis si ponéis el ratón encima de agencia por ejemplo, justo al cargar la página se abrirá el desplegable pero una vez ha cargado desapatrece :S

, saludos y gracias.

[alberto510a]

Hola.

Me baso en Agencia para mostrarte el error con los demás solo tendrás que hacer lo mismo.

Código actual:

Código:

<a href="/agencia/viajes.html" class="first-item" id="menu169">
<span>VIAJES</span></a>
<ul style="width: 0px; left: -999em;">

Código correcto:

Código:

<a href="/agencia/viajes.html" class="first-item" id="menu169">
<span>VIAJES</span></a>
<ul style="width: 0px;">

Como ves el error está en el estilo de las listas ya que tienen la propiedad left:-999em; y esto hace que te aparezca muy alejado el menú solo deberás borrarlo y ya irá bien.

Aquí te dejo una captura del menú funcionando con la página cargada:



(http://img41.imageshack.us/img41/4223/sinttulogqf.png)

Saludos, si tienes alguna duda más avísame!

[ZonaGente]

Hola Alberto, gracias por tu pronta respuesta. Sabes exactamente donde debo editar eso ? En la admin de joomla donde se editan los enlaces del menú no da opción de ese código, solo título y enlace, luego en la hoja de estilos del tema tampoco aparece, creo que podría ser algún tipo de módulo o algo, podrías indicarme con más exactitud ? Esta tontería me está volviendo loco :S

, saludos y gracias.

[alberto510a]

Esto creo que depende de la versión de tu joomla pero mas o menos es igual en todos.

Tendrás que ir al gestor de plantillas pulsar en la tuya y ahí te saldrán todos los archivos que configuran a tu plantilla. Por alguno de esos archivos debe estar eso que hace.

Saludos

[ZonaGente]

Lo voy a dejar por imposible al final :( He editado todos los archivos posibles de la plantilla quitando eso que dices y no hay modo de solucionar el error :`(

[ZonaGente]

No existe la posiblidad que pueda ser otra cosa ? Es importante reparar la web por favor ...

, saludos y gracias.

[alberto510a]

Puedes intentar hacer esto:

Código CSS:

.menuhor ul {
left:0em !important;
}
 

Así todas las listas dentro de esa clase cogerían ese estilo.

Saludos.

PD: Probé en tu css eso que te dije y ya me cogió el estilo para todos y me ha funcionado perfectamente, así que tan solo tendrías que llegar al archivo .css que arriba te expliqué como hacerlo.

[ZonaGente]

gracias por tu respuesta alberto, en que parte tendría que colocar exactamente eso del css ?

, gracias.

[alberto510a]

Tendrás que ir al gestor de plantillas pulsar en la tuya y ahí te saldrán todos los archivos que configuran a tu plantilla. Si no me equivoco tu archivo de css se debe llamar template.css según ví, lo clickas y añades esas líneas que te puse.

[ZonaGente]

Lo he colocado al principio del archivo template.css de esa plantilla y el único cambio que he apreciado es que al cargar la web aparecen todos los desplegables del meú a la vez pero luego cuando ha cargado vuelve la web igual...

Otra idea ?

Muchas gracias por tu ayuda alberto

[alberto510a]

¿Podrías mandarme una captura de pantalla de como lo colocaste para que así pueda ver como lo pusiste y dónde?

Saludos.

[ZonaGente]

Claro, aquí la tienes.

[alberto510a]

A ver es que viene bastante mezclado el código de esa plantilla. Ahora haz esto:

Código CSS:

#topnav ul li ul {display:none}
#topnav ul li ul:hover{display:block}
 

La primera id ya esta creada tan solo tienes que buscarla y agregarle ese atributo. La 2º línea la copias tal cual.

[ZonaGente]

No se exactamente lo que quieres decir, aquí te dejo el template.css.

/*****************************/
/*** Core html setup stuff ***/
/*****************************/

html {
height: 100%;
margin-bottom: 1px;
}

form {
display:inline;
}

body {
margin: 0px 0px 0px 0px;
width: 100%;
display: table;
background:url(../images/bg_page.png) top repeat-x #FFE382;
}

body, td{
font-family: "Trebuchet MS";
font-size: 13px;
color: #ACACAC;
line-height: 1.3em;
}

a:link, a:visited {
text-decoration: none;
font-weight: normal;
}

a:hover {
text-decoration: underline;
font-weight: normal;
}

input.button { cursor: pointer; }

p { margin-top: 0; margin-bottom: 5px; }

img { border: 0 none; margin:0px; }

/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/
#page_bg {
padding: 0px;
margin: 0px;
margin-bottom: 0px;
background: #202020 url(../images/bg_page.png) center repeat-y;
}

div#top_menu{
height:54px;
margin:0px auto;
width: 978px;
}

#topnav{ height: 54px; width:978px; margin: 0px; padding:0px; font-weight: bold; }
#topnav ul { margin: 0px 0px 0px 11px; padding: 0; width: auto; float: left; list-style-type:none; }
#topnav ul li{ margin: 0; padding: 0; height: 54px; float: left; position: relative; }
#topnav ul li a{ color: #FFFFFF; font-weight: bold; text-decoration: none; padding: 14px 10px 0px 10px; height:40px; display: block; float: left; }
#topnav ul li a:hover{ background-color: #444444; text-decoration: none; font-weight: bold; color: #fff; }
#topnav ul li ul ul { margin: -50px 0 0 297px; z-index: 100; }
#topnav ul li li { width:auto; height: 35px; }
#topnav ul li li a { color: #000000; text-transform: none; display: block; background: none; width: 277px; border-top: 1px solid #DDDDDD; border-left: 0px; padding: 9px 10px 6px 10px; height:20px; }
#topnav ul li li a:hover{ background: none; background-color: #333333; left: 0; width: 277px; padding: 9px 10px 6px 10px; height:20px; border-top: 1px solid #DDDDDD; }
#topnav ul li ul {top: 54px; left: 0; display: block; height: 36px; width: 277px; position: absolute; z-index: 99; clear: left; margin-top: 0px; margin-left: 0px; }
#topnav ul li:hover ul ul, #topnav ul li:hover ul ul ul { }
#topnav ul li:hover ul, #topnav ul li li:hover ul, #topnav ul li li li:hover ul { left: auto; }

div#main_bg{
margin:0px auto;
width: 978px;
text-align:left;
}

div.banner1{
background: url(../images/banner1.jpg) top center no-repeat;
}

div#h_area{
margin:0px auto;
width: 964px;
height:250px;
text-align:left;
padding-left:14px;
padding-top:10px;
}


.logo{
display: block;
float:left;
padding-top:5px;
margin-bottom:10px;
margin-left:10px;
width:600px;
}
a.logo,a.logo:link,a.logo:hover, a.logo:visited{
font-size:26px;
line-height: 58px;
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
font-family:"Trebuchet MS",Arial;
}

div#user4{
float:right;
text-align:left;
margin-right: 20px;
}

div#user4 div.search{
width:220px;
height:46px;
text-align:left;
padding-top: 5px;
background: url(../images/search_bg.gif) top left no-repeat;
}
div#user4 div.search .inputbox {
background:#FFFFFF;
width: 150px;
height: 16px;
margin-left: 60px;
font-size: 11px;
color: #454545;
padding:5px 2px 2px 2px;
border: 1px solid #D3D3D3;
}

div#main_top table.contentpaneopen{
padding:0px;
margin-top:55px;
margin-left:12px;
width:400px;
height:149px;
overflow: auto;
text-align:left;
color:#FFFFFF;
float:left;
}
div#main_top table.contentpaneopen td{
color:#FFFFFF;
}

.search {
text-align:left;
width: 156px;
height:43px;
}
.search .inputbox {
background:#FFFFFF;
width: 156px;
height: 17px;
font-size: 11px;
color: #454545;
margin:9px 0px 0px 20px;
border: 1px solid #D3D3D3;
}


#leftcolumn{
margin-left:9px;
padding:0px;
width:205px;
float:left;
}
#rightcolumn{
margin-right:9px;
padding:0px;
width:205px;
float:right;
}

#maincolumn{
width:530px;
float:left;
margin:0px 5px 0px 5px;
padding:0px;
overflow:hidden;
}
#maincolumn_middle{
width: 740px;
float:left;
margin:0px 5px 0px 5px;
padding:0px;
overflow:hidden;
}
#maincolumn_big{
width: 967px;
float:left;
margin:0px 5px 0px 5px;
padding:0px;
overflow:hidden;
}

div.path{
margin:10px 0 0 0px;
padding: 5px;
}

div.nopad {
float:left;
padding:0 0px 15px 0px;
}

div.nopad ul {
clear: both;
}
.article_separator {
height:35px;
line-height:35px;
}
form#form-login fieldset {
border: none;
margin: 0;
margin-left:10px;
}
form#form-login ul li{
padding: 0;
}

form#form-login ul li a {
text-align: left;
padding: 0px;
font-size: 10px;
color: #858585;
}

#leftcolumn div.module_menu, #leftcolumn div.module{
margin: 10px 0px 0px 0px;
padding:0px;
width: 205px;
}
.article_column {
padding-right:10px;
}
#rightcolumn div.moduletable_menu, #rightcolumn div.moduletable, #rightcolumn div.moduletable_text{
margin: 10px 0px 0px 0px;
padding: 0px;
width: 205px;
}
div.bannergroup_text {
margin:0px 13px 15px 13px;
}
.bannerheader {
font-weight:bold;
margin-bottom:10px;
}
.banneritem_text {
margin-bottom:10px;
}
.bannerfooter_text {
margin-bottom:10px;
}
#leftcolumn div.module_menu div div div, #leftcolumn div.module div div div,
#rightcolumn div.moduletable_menu, #rightcolumn div.moduletable, #rightcolumn div.moduletable_text{
background: url(../images/rub_bottom.png) center bottom no-repeat;
}
#leftcolumn div.module_menu div div div, #leftcolumn div.module div div{
margin: 0px;
padding: 0px;
padding-bottom:5px;
width: 205px;
height:auto;
}

#leftcolumn div.module_menu div div div div, #leftcolumn div.module div div div div{
background: none;
padding:4px 8px;
}
#leftcolumn h3,
#rightcolumn h3{
text-align: left;
padding-left:15px;
height: 42px;
width: 190px;
line-height: 40px;
color:#FFFFFF;
font-size:16px;
margin:0px;
font-weight:bold;
}
table.poll thead td {
text-align: left;
padding-left:10px;
}
table.poll td {
text-align: left;
}
#leftcolumn ul.menu li ul{
list-style: none;
}
.pollstableborder {
margin: 5px 0px 10px 0px;
}
.poll td div{
display:inline;
}

/* forms */

#leftcolumn .moduletable ul,
#rightcolumn .moduletable ul {
margin: 6px 0;
padding: 0;
list-style: none;
}

#leftcolumn .moduletable ul li,
#rightcolumn .moduletable ul li {
margin: 0;
padding: 0 2px;
}
.moduletable ul {
padding:5px 10px 5px 12px;
margin:0px;
}

.moduletable ul li {
padding:0px 10px 5px 15px;
margin:0px;
line-height:18px;
}
#leftcolumn ul.menu li#current ul li,
#rightcolumn ul.menu li#current ul li {
margin: 0px;
padding: 0px;
}
ul.menu {
padding:5px 10px 5px 12px;
margin:0px;
}
ul.menu li{
padding:0px 10px 5px 15px;
margin:0px;
}

ul.menu li ul {
padding:0px 0px 5px 0px;
margin:0px;
}
ul.menu li ul li{
padding:0px 0px 0px 15px;
border:none;
}
ul.menu li#current ul li a{
margin-left:15px;
text-decoration:none;
}
ul.mostread {
padding:5px 10px 5px 12px;
margin:0px;
}
ul.mostread li{
padding:0px 10px 5px 15px;
margin:0px;
line-height:18px;
}
ul.latestnews {
padding:5px 10px 5px 12px;
margin:0px;
}
ul.latestnews li{
padding:0px 10px 5px 15px;
margin:0px;
line-height:18px;
}
div.componentheading{
font-size:16px;
font-size:19px;
margin:7px auto;
}
td.contentheading{
font-weight:normal;
vertical-align:top;
font-size:19px;
height:30px;
color:#9E9E9B;
background: url(../images/contentheading_ico.png) left top no-repeat;
}
table.contentpaneopen td.contentheading{
padding-left:34px;
}
table.contentpaneopen{
border-collapse: collapse;
margin-left:5px;
}
td.buttonheading{
padding:0px 2px 0px 2px;
}
table.contentpaneopen td{
padding:0px;
}
.contentpaneopen p{
line-height:22px;
}
span.small, td.createdate, td.modifydate{
font-size:11px;
color:#FFFFFF;
}
span.pagination span, span.pagination a{
padding:5px;
}



div#f_area{
background: url(../images/f_area_bg.png) top center no-repeat;
margin:0px auto;
width: 978px;
text-align:left;
margin-bottom:3px;
}
#f_area div.moduletable, #f_area div.moduletable_menu{
float: left;
margin:20px 4px 10px 6px;
width: 234px;
}
#f_area h3{
text-align:center;
vertical-align:bottom;
height: 30px;
width: 234px;
color:#FFFFFF;
font-size:17px;
font-family:"Trebuchet MS", Tahoma, Verdana;
margin:0px;
padding-top:20px;
}

.menuhor ul {
left:0em !important;
}


/* System Standard Messages */
#system-message { margin-bottom: 20px; }

#system-message dd.message ul { background: #C3D2E5 url(../../system/images/notice-info.png) 4px center no-repeat;}

/* System Error Messages */
#system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; margin:0px; padding-left: 40px; text-indent:0px;}

/* System Notice Messages */
#system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E;}

#syndicate{
float:left;
padding-left: 25px;
}

[ZonaGente]

Hola albrto, al parecer ahora ya si cargan, el problema que tengo ahora es que al cargar la web aparecen todos los menús, como podría hacerlo para que no aparecieran desplegados al cargar la web ?

Gracias por todo, me están siendo de gran ayuda :)

[alberto510a]

Hola.

Para arreglar eso tienes que hacer 2 cambios:

1º: Busca esta línea en el mismo archivo donde metiste lo otro que te dije (el mismo que me has copiado): #topnav ul li ul
2º: Esa línea tiene varios atributos css dentro de ella uno de ellos es display:block; cambialo por display:none;
3º: Crea esta nueva línea en cualquier sitio como ya hiciste anteriormente:

Código CSS:

#topnav ul li ul:hover {display:block;}
 

La copias tal cual en cualquier sitio como la otra vez y listo.

Saludos.

[ZonaGente]

Ahora a parte de aparecer, se queda fijo pero al pasar el ratón por encima desaparece, me tiene loco este menú !!!!

[alberto510a]

Te equivocas ahora ya esta corregido y no aparece al cargar la página abierto (si lo sigues viendo igual es que no borraste la caché del navegador) pero te faltó una línea y por eso no se despliega.

Busca esta línea:

#topnav ul li:hover ul, #topnav ul li li:hover ul, #topnav ul li li li:hover ul { left: auto; }

Y ponla así

#topnav ul li:hover ul, #topnav ul li li:hover ul, #topnav ul li li li:hover ul { left: auto; display:block; }

Tras esto borra cookies y caché de tu navegador (con este cerrado) y vuelve a abrir tu página.

Suerte!

[ZonaGente]

Yo no entiendo nada, ahora no aparece al cargar ni nada... Ya desisto ...
Cuanto me cobrarías por solucionarlo ? Ya me empieza a ser urgente porque el cliente se queja y no encuentro el modo :S

[alberto510a]

¿Tienes skype o sino hablamos por mensaje privado?

[alberto510a]

Edito: Funciona perfectamente como ya te dije anteriormente tan solo debes borrar la caché de tu navegador ya que sino lo haces las hojas de estilo se te guardan en la caché y aunque cierres en el navegador se conservan.

Saludos.

[ZonaGente]

Cierto!!!

Muchas gracias, eres un genio !!!

Mil gracias de verdad, no habría podido hacer nada sin ti :D

[alberto510a]

De nada para eso estamos ;)