Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Web Design Valdeci

Submenu escondido dentro de div

Recommended Posts

Bom Dia,

 

Estou fazendo um site onde utilizo um script css que encontrei na net responsivo.

Em uma das divs utilizo um menu com submebu. QUanto clico no menu para exibir o submenu ele fica escondido.

Já coloquei o z-index do menu e submenu com 9999 mas nao adiantou. Vou postar abaixo os codigos e se alguem souber agradeço

 

Segue a imagem

 

img.jpg

 

css da pagina

/* CSS Resets */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0 font}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:100%}


/* ==================================================================================================================== */
/* ! The 1140px Grid V2 by Andy Taylor \ http://cssgrid.net \ http://www.twitter.com/andytlr \ http://www.andytlr.com   */
/* ==================================================================================================================== */

.container {
padding-left: 20px;
padding-right: 20px;
font-size:17px;
}
.quemsomos {
background-image:url(../images/fdQuemSomos.jpg);
background-repeat:no-repeat;
background-position:right;
}
.container_quemsomos {
padding-left: 20px;
padding-right: 20px;
}
.container_cabecalho {
padding-left: 20px;
padding-right: 20px;
background-color:#226586;
}
.container_rodape {
padding-left: 20px;
padding-right: 20px;
background-color:#f4f6f7;
}

.row {
width: 100%;
max-width: 1140px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}

.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol {
margin-right: 3.8%;
float: left;
min-height: 1px;
}

.row .onecol {
width: 4.85%;
}

.row .twocol {
width: 13.45%;
}

.row .threecol {
width: 22.05%;
}

.row .fourcol {
width: 30.75%;
}

.row .fivecol {
width: 39.45%;
}

.row .sixcol {
width: 48%;
}

.row .sevencol {
width: 56.75%;
}

.row .eightcol {
width: 65.4%;
}

.row .ninecol {
width: 74.05%;
}

.row .tencol {
width: 82.7%;
}

.row .elevencol {
width: 91.35%;
}

.row .twelvecol {
width: 100%;
float: left;
}

.last {
margin-right: 0px;
}

img, object, embed {
max-width: 100%;
}

img {
	height: auto;
}


/* Smaller screens */

@media only screen and (max-width: 1023px) {

	body {
	font-size: 0.8em;
	line-height: 1.5em;
	}
	
	}


/* Mobile */

@media handheld, only screen and (max-width: 767px) {

	body {
	font-size: 16px;
	-webkit-text-size-adjust: none;
	}
	
	.row, body, .container {
	width: 100%;
	min-width: 0;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 0px;
	padding-right: 0px;
	}
	
	.row .onecol, .row .twocol, .row .threecol, .row .fourcol, .row .fivecol, .row .sixcol, .row .sevencol, .row .eightcol, .row .ninecol, .row .tencol, .row .elevencol, .row .twelvecol {
	width: auto;
	float: none;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 20px;
	padding-right: 20px;
	}

}

css do menu

.dropdowns nav, .dropdowns ul, .dropdowns li, .dropdowns a  {margin: 0; padding: 0; font-size:19px; z-index:9999; }

.dropdowns a {text-decoration: none;}

.toggleMenu {
    display:  none;
}
.nav {
    list-style: none;
     *zoom: 1;
}
.nav:before,
.nav:after {
    content: " "; 
    display: table; 
}
.nav:after {
    clear: both;
}
.nav ul {
    list-style: none;
}
.nav a {
    padding: 10px 15px;
}
.nav li {
    position: relative;
}
.nav > li {
    float: left;
}
.nav > li > .parent {
    background-image: url("images/downArrow.png");
    background-repeat: no-repeat;
    background-position: right;
}
.nav > li > a {
    display: block;
}
.nav li  ul {
    position: absolute;
    left: -9999px;
}
.nav > li.hover > ul {
    left: 0;
}
.nav li li.hover ul {
    left: 100%;
    top: 0;
}
.nav li li a {
    display: block;
    position: relative;
    z-index:100;
}
.nav li li li a {
    z-index:200;
}

@media screen and (max-width: 768px) {
    .active {
        display: block;
    }
    .nav > li {
        float: none;
    }
    .nav > li > .parent {
        background-position: 95% 50%;
    }
    .nav li li .parent {
        background-image: url("images/downArrow.png");
        background-repeat: no-repeat;
        background-position: 95% 50%;
    }
    .nav ul {
        display: block;
        width: 100%;
    }
   .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }

}

Compartilhar este post


Link para o post
Compartilhar em outros sites

adicione no dropdowns

display: none; position: absolute; min-width: 150px;

depois coloque

.seumenu .dropdowns {
top: 0; /*teste outros valores aq tbm*/
left: 100%;
}

 

e troque os valores para ver aonde ele ira se posicionar e verifique se o dropdowns é o sub menu msm

 

ou tente alguns valores negativos e verifique se ta adicionado no html corretamente, e qual link do template que baixou?

Compartilhar este post


Link para o post
Compartilhar em outros sites

so vendo mesmo para achar você tem ele hospedado? pra achar eh bom ver o html e css todo.

 

se vc quiser me manda por email eu arrumo pra vc e te falo qual o problema agora que vi a imagem acho que nao esta no menu o problema: frankbruno775@gmail.com

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.