Comunidad de diseño web y desarrollo en internet online

Funcionamiento incorrecto de pestañas desplegables

Citar            
MensajeEscrito el 07 Jun 2016 11:07 pm
Hola. Mi problema es que he creado en blogger un blog con un menú que contiene pestañas desplegables. Al pasar el ratón sobre una pestaña principal aparecen las subpestañas, pero al intentar pinchar en ellas, desaparecen. He probado con varios CCS, pero sólo me funciona ( aunque mal, evidentemente) el que adjunto. ¿me falta algo? Puede que el error esté en el HTML? Gracias
/* Menu desplegable
----------------------------------------------- */
.tabs-inner .section:first-child ul { margin-top: 0px;}
.tabs-inner .widget ul { background: #ffffff; text-align: center !important;}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: b7d6ce; /*Color del texto de las pestañas al pasar el ratón por encima*/
background-color: #F6E3CE; /*Color del fondo de las pestañas al pasar el ratón por encima*/
text-decoration: none;
}
.tabs .widget li, .tabs .widget li{ display: inline; float: none;}
#NavMenu {
position: relative;
margin: 0 auto;
padding: 0;
border-top: 0px solid #b7d6ce; /*Borde superior del menú, si no queremos borramos la línea*/
border-bottom: 0px solid #b7d6ce; /*Borde inferior del menú, si no queremos borramos la línea*/
background: #b7d6ce; /*Color de fondo del menú, si no queremos borramos la línea*/
}
#NavMenuleft {
width: 1100px; /*Ancho del menú*/
float: none;
margin: 0 auto;
padding: 0;
}
#nav {margin: 0 auto; padding: 0; background:transparent;}
#nav ul {
float: none;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}
.tabs-inner .widget li a {
display: inline-block;
padding: .6em 1em;
font: normal normal 18px 'Georgia', Trebuchet, Verdana, sans-serif; /* Tipo de letra */
color: #000000; /* Color de la letra */
border-left: 0px solid #b7d6ce; /* Borde izquierdo de la celda */
border-right: 0px solid #b7d6ce; /* Borde derecho de la celda */
}
#nav li a:hover, #nav li a:active {
color: #000000; /*Color del texto de las pestañas al pasar el ratón por encima*/
margin: 0;
padding: 10px 15px 10px;
text-decoration: none;}
#nav li li a, #nav li li a:link, #nav li li a:visited {
font: normal normal 14px Cambria; /*Tamaño y tipografías de las subpestañas*/
background: #F6E3CE; /*Color del fondo de las subpestañas*/
width: 200px; /*Tamaño de éstas*/
color: #000000; /*Color del texto de las subpestañas*/
float: none;
margin: 0;
padding: 7px 10px;
}
#nav li li a:hover, #nav li li a:active {
background: #cccccc; /*Color del fondo de las subpestañas al pasar el ratón por encima*/
color: #000000; /*Color del texto de las subpestañas al pasar el ratón por encima*/
padding: 7px 10px;
}
#nav li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;}
#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; }
#nav li ul a { width: 140px; }
#nav li ul ul { margin: -32px 0 0 171px; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover {position: static;}
.tabs-outer{overflow: visible;}
.tabs-inner { padding: 0px; } .section { margin: 0px; }

Por belmarrey

1 de clabLevel



 

firefox
Citar            
MensajeEscrito el 10 Jun 2016 12:23 pm
¿y el html?
¿y el js?

Por franqgeek

48 de clabLevel



Genero:Masculino  

Desarrollador Web

chrome
Citar            
MensajeEscrito el 13 Jun 2016 07:07 pm
Gracias por tu interés. Te comento que el HTML lo he revisado varias veces y yo creo que está bien, pero en todo caso, aquí te lo dejo. De lo otro de lo que hablas, ni idea. Es que muy enterada no estoy....

<nav id="menu_gral">
<ul id='nav'><li><a href='http://gadoupasviveiro.blogspot.com.es/p/quen-somos.html'>QUIENES SOMOS</a></li>
<li>
<li><a href='http://gadoupasviveiro.blogspot.com.es/p/colabora-con-nos_4.html'>COLABORA</a></li>
<li>
<a href='http://gadoupasviveiro.blogspot.com.es/p/en-adopcion.html'>EN ADOPCIÓN</a>
<ul>
<li><a href='http://gadoupasviveiro.blogspot.com.es/p/perros.html'>Perros</a></li>
<li><a href='http://gadoupasviveiro.blogspot.com.es/p/gatos.html'>Gatos</a></li>
</ul></li>
<li>
<a href='http://gadoupasviveiro.blogspot.com.es/p/adoptados.html'>ADOPTADOS!!</a></li>

<li><a href='http://gadoupasviveiro.blogspot.com.es/p/contactar_4.html'>CONTACTAR</a></li></li></ul></nav>

Por belmarrey

1 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.