GARANTIR DESCONTO

Fórum SUBMENU QUE FUNCIONE NO IE #436626

08/03/2013

0

Front-end

Pessoal boa tarde, estou com o seguinte problema: Fiz o site da empresa, e ele se comporta bem em chrome | mozzila | e alguns IE ( Máquinas específicas ). Resumidamente é o seguinte, o site www.presconinformatica.com.br é o site em questão, observem que no chrome ele parece ok ... submenus funcionam ... no explorer e algumas vezes no firefox o menu some ao passar o mouse ou pior, não carrega o submenu.

Tenho a impressão que não há suporte por parte do IE Para li:hover ... só js, alguém teria uma solução ou hack que resolva este problema meu? ... segue html da index e depois do css.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>PRESCON | Assessoria Informática</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/estilo.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.min.js"></script>
<script src="js/jquery-1.7.min.js"></script>
<link href=''http://fonts.googleapis.com/css?family=Terminal+Dosis'' rel=''stylesheet'' type=''text/css'' />
<script type="text/javascript" src="js/jquery.pikachoose.js"></script>
<script type="text/javascript">
				$(document).ready(function() {
				$("#pikame").PikaChoose();	});
	</script>
</head>
<body>
<div id="main-nav">
<div class="center"	>
	
	<div id="logo">	<img src="img/logo_prescon.png" /></div>
	<nav id="menu">
		<ul id="nav">
			<li><a href="index.html">Home</a></li>
			<li><a href="empresa.html">A Empresa</a></li>
			<li><a href="#">» Produtos</a>
			<ul class="nav first">
				<li><a href="sistemas_adm.html">Sistemas Administrativos</a></li>
				<li><a href="saude.html">Saúde</a></li>
				<li><a href="educacao.html">Educação</a></li>
				<li><a href="assistencia_social.html">Assistência Social</a></li>
				<li><a href="sist_inf_geo.html">Sist. de Inf. Geográficas / B.I</a></li>
				<li><a href="portal_transp.html">Portal Transparência</a></li>
			</ul>
			</li>
			<li><a href="tecnologia.html">Tecnologia</a></li>
			<li><a href="contato.html">Contato</a></li>
			<li><a href="#">» Login</a>
			<ul class="nav first">
				<li><a href="http://201.76.44.149/ADM/Agenda/Autenticacao.aspx?ReturnUrl=%2fADM%2fAgenda%2fDefault.aspx">Agenda</a></li>
				<li><a href="http://201.76.44.149/ADM/Atendimento/login.aspx">Atendimento</a></li>
			</ul>
			</li>
		</ul>
	</nav>
</div>
</div>
<div id="slider">
	<div class="wrapper">
		<div class="pikachoose">
			<ul id="pikame">
				<li><a href=""><img src="img/banner_header.png" alt="" /></a></li>
				<li><a href=""><img src="img/banner_header1.png" alt="" /></a></li>
				<li><a href=""><img src="img/banner_header2.png" alt="" /></a></li>
			</ul>
		</div>
	</div>
</div>
<div id="content" align="center">
	<div class="row" align="center">
		<div class="col-3">
			<h2><b>DESCUBRA COMO PODEMOS AJUDAR NA SUA ADMINISTRAÇÃO</b></h2>
			<p>Especializada em desenvolvimento de softwares, a Prescon Informática atende as características e necessidades de cada cliente, com um plano de ação eficaz, equipe técnica especializada e treinada para garantir a qualidade dos nossos produtos e serviços.			
			<!--Se você ainda não possui um parceiro confiável, que tenha experiência no mercado, um plano de ação eficaz, equipe técnica testada e aprovada por dezenas de câmaras e prefeituras espalhadas no estado de São Paulo, está na hora de nos procurar e avaliar os nossos produtos, serviços e a nossa qualidade de atendimento ao cliente.-->
<b>
			</p>
			</a></b>
		</div>
		<div class="col-3">
			<h1><b>O que é a Prescon?</b></h1>
			<p>
				A Prescon Informática Assessoria Ltda é uma empresa de sólida tradição no mercado que oferece ao setor público soluções informatizadas e consultoria especializada.<b><a href="empresa.html"><span class="leiamais"> LEIA MAIS</span>
			</p>
			</a></b>
		</div>
		<!-- Item -->
		<div class="col-3">
			<h1><b>A Experiência</b></h1>
			<p>
				Analisar, empreender e inovar, para que nossos clientes tenham sempre as melhores soluções informatizadas, são objetivos levados muito a sério por nós.<b><a href="empresa.html"><span class="leiamais"> LEIA MAIS</span>
			</p>
			</a></b>
			</div>
		<!-- Clear -->
		<div><hr class="style-two"></div>
		</hr>
	</div>
	
	<label><b>AGORA CONHEÇA NOSSOS SERVIÇOS</b></label>
	<br />
	<br />
	<div class="row" align="center">
		<div class="col-3">
			<div id="pwindows">
			</div>
			<h1><b>Plataforma WINDOWS</b></h1>
			<p>
				Para atender os módulos administrativos, dispomos de um software chamado WinPublic, que utiliza banco de dados SQL/Server, bastante maduro e estável, atendendo dezenas de Câmaras e Prefeituras nos estados de São Paulo e Minas Gerais. <b><a href="tecnologia.html"><span class="leiamais"> LEIA MAIS</span>
			</p>
			</a></b>
		</div>
		<div class="col-3">
			<div id="pweb">
			</div>
			<h1><b>Plataforma WEB</b></h1>
			<p>
				Os módulos de Saúde, Educação, Protocolo, Obras, Portal da Transparência, Cemitério, SIG, etc... são desenvolvidos com a tecnologia “full web”, dispensando a instalação de qualquer outra ferramenta nas estações de trabalho.  <b><a href="tecnologia.html"><span class="leiamais"> LEIA MAIS</span>
			</p>
			</a></b>
		</div>
		<!-- Item -->
		<div class="col-3">
			<div id="assessoria"></div>
			<h1><b>Assessoria</b></h1>
			<p style="text-align: justify 2; word-spacing: 2px; ">
				Nossa equipe possui ampla experiência no setor público ( Saúde, Educação e Administrativa) para orientar nossos clientes quanto às melhores práticas nesse segmento de administração municipal. <b><a href="assessoria.html"><span class="leiamais"> LEIA MAIS</span>
			</p>
			</a></b>
		</div>
		<p>
		<div><hr class="style-two"></div>
			</hr>
			<div id="lasttext" align="left">
			<!--<div id="inf_tec"></div>-->
				<h2>PREPARADO PARA NOVOS DESAFIOS?</h2>
				<p>
					Um sistema de informação não é apenas um programa de computador, e sim um forte aliado nos negócios e em sua gestão como um todo, a PRESCON dispõe de tecnologia e profissionais experientes no mercado. <b><a href="contato.html"><span class="leiamais"> Fale conosco</span>
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
				</p>
				</a></b>
			</div>
	</div>
</div>
		<div id="footer" align="center">
			Fale agora mesmo com o atendimento da PRESCON: <b>(11) 4427-3341</b> ou <b><a href="MAILTO:atendimento@presconinformatica.com.br">atendimento@presconinformatica.com.br</a></b>
		</div>
	
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push([''_setAccount'', ''UA-38802277-1'']);
  _gaq.push([''_setDomainName'', ''presconinformatica.com.br'']);
  _gaq.push([''_trackPageview'']);

  (function() {
    var ga = document.createElement(''script''); ga.type = ''text/javascript''; ga.async = true;
    ga.src = (''https:'' == document.location.protocol ? ''https://ssl'' : ''http://www'') + ''.google-analytics.com/ga.js'';
    var s = document.getElementsByTagName(''script'')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>	
</body>
</html>


AGORA DO CSS EM QUESTÃO:
/*	## 	Começo de verificação de bugs em IE e Mozzila ##  */
div:after, ol:after, form:after, ul:after, dl:after {content:".";display:block;clear:both;visibility:hidden;height:0;overflow:hidden;}
/*	## 	Fim de verificação de bugs em IE e Mozzila    ##  */

html, body {
margin: 0;
padding: 0;
font-family: verdana;
font-size: 11px;
color: #666666;
background: #e6e8e5 url("../img/backgroundsite.png") repeat top left;
background-attachment:fixed;
background-size: 100%;
}

#logo {
  padding: 11px;
  float: left;
}

#menu {
color: #000;
width: 100%;
text-align: center;
}

#menu ul li {
line-height: 18px;
margin: 1px;
display: inline-block;
list-style: none;
text-transform: uppercase;
/*border: 1px #bdbdbd dotted;*/
padding: 0px 10px 0px 10px;
list-style-image: url("../img/menu_mais.png");
}

.center {
 max-width: 860px;
 margin:0 auto;

}

#menu_sup li ul, #menu_sup li:hover ul ul{
display:none;
position:absolute;
width:150px;
top:0;
left:149px;
}

#menu_sup li ul{
display:none;		/*define para não aparecer a ul*/
position:absolute;  /*define uma posição absolute*/
width:150px;		/*define uma largura*/
top:0; 				/*colocamos top com 0*/
left:149px; 		/*afastamos para esquerda 149px, 1px a menos do que largura da ul*/
list-style-image: none;
}

h1 { letter-spacing:-1px; }


.vertical section{   
     width:100%;   
     height:40px;   
     -webkit-transition:height 0.2s ease-out;  
     -moz-transition:height 0.2s ease-out;  
     -o-transition:height 0.2s ease-out;  
     transition:height 0.2s ease-out;  
}  
  
/*Set height of the slide*/  
.vertical :target{   
     height:250px;   
     width:97%;  
}  

.vertical section h2 {   
     position:relative;   
     left:0;   
     top:-15px;   
}  
/*Set position of the number on the slide*/  
.vertical section:after{   
    top:-60px;  
    left:810px;  
}  
.vertical section:target:after{   
      left:-9999px;  
}  

hr.style-two {
border: 0;
height: 1px;
width:100%;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
}

.hidden {
display: none;
}

#fundocont {
width:800px;
height:800px;
bottom:0 auto;
background-color:#f2f2f2;
}


label {
width: 100%;
position: absolute;
left: -60%;
text-align: right;
color: #fff;
background: #033364;
padding: 5px;
}

span.leiamais {
color:#1b71c8;
font-size:8px;
}


#pwindows {
background:url("../img/icons/plat_windows.png") no-repeat;
float:left;
width:70px;
height:65px;
}

#pweb {
background:url("../img/icons/plat_web.png") no-repeat;
float:left;
width:96px;
height:89px;
}

#assessoria {
background:url("../img/icons/assessoria.png") no-repeat;
float:left;
width:96px;
height:89px;
}

#inf_tec {
background:url("../img/inf_tec.png") no-repeat;
float:left;
width:140px;
height:93px;
}

#page-container {
width: 860px;
margin:0 auto;
}

#menu_sup {
	position: relative;
	margin-left: 30px;
}

#menu_sup ul.sub-menu {
	display: none;
	position: absolute;
	top: 20px;
	left: -10px;
	padding: 10px;
	z-index: 90;
}

#menu_sup ul.sub-menu li {
	text-align: left;
}

#menu_sup li:hover ul.sub-menu {
	display: block;
	border: 1px solid #ececec;
}

a:hover {
	color: black;
}

#main-nav{
top:0;
position:fixed;
float:left;
min-height: 95px;
background: #fff;
width:100%;
z-index:1;
}



#barra_azul {
height:30px;
background:#1e3a4f;
}

a:link, a:visited {
text-decoration: none;
color: inherit;
}

#content {
/*background: #e6e8e5; ######### BG SÓLIDO UMA COR ############*/
background: #e6e8e5 url("../img/backgroundsite.png") repeat top left;
background-attachment:fixed;
background-size: 100%;
width:100%;
float:left;
margin-bottom:40px;
}


#content .row .col-3 h1{
color:#15579a;
font-size:1.4em;
font-weight:normal;
}

#content .row .col-3 h2{
color:#15579a;
font-size:13px;
font-weight:normal;
}

.col-3 {
font-size:11px;
width:30.33333%;
padding: 10px 1.5%;
float:left;
text-align: left;
}
.col-3 p {
text-align: justify;
}


#slider {
background: #1b3246;
margin-top: 100px;
overflow: hidden;
height:240px;
width:100%;
float:left;
}


#content .row {
max-width: 860px;
}


.barra_at_inf {
background: #76acb9;
color:#1e3a4f;
width:40%;
float:right;
}

.barra_at_inf h2{
color:#fff;
}

#content_page {  
background: #f1f1f1; 
margin: 95px auto; 
padding: 40px; 
max-width:820px; 
}
#content_page H2{ color:#033364; }

#footer {
font-size:12px;
background: #033364;
color:#fff;
width:100%;
min-height: 30px;
position:fixed;
bottom:0;
width:100%;
line-height:30px;
}



/*slider*/
/* Style the thumbnails */
.pika-thumbs {
	padding: 0 16px;
	display:none;
}
.pika-thumbs li {
	width: 144px;
	height:74px;
	margin: 10px 0 0 17px;
	padding: 0;
	overflow: hidden;
	float: left;
	list-style-type: none;
	padding: 3px;
	margin: 0 5px;
	background: none;
	border: 0 px solid #e5e5e5;
	cursor: pointer;
}
 .pika-thumbs li:last {
margin: 0;
}
.pika-thumbs li .clip {
	position:relative;
	height:100%;
	text-align: center;
	vertical-align: center;
	overflow: hidden;
}
/* The stage is the wrapper. The image fills 100% the height of the stage */

.pika-stage {
	position: relative;
	background: none;
	border: 0 px solid #e5e5e5;
	text-align:center;
	height:240px;
	width:100%;
}
.pika-stage img {
	height:100%;
}
.pika-stage .caption {
	position: absolute;
	background: #FFF;
	background: rgba(255,255,255,0.75);
	border: 0 px solid #141414;
	font-size: 13px;
	color: none;
	padding: 10px;
	text-align: right;
	bottom: 50px;
	right: 10px;
}
.pika-stage .caption p {
	padding: 0;
	margin: 0;
	line-height: 14px;
}
/*	
-----------------------------------------
	Contador do Slider/Banner			|
-----------------------------------------
*/
.pika-counter {
	position: absolute;
	bottom: 45px;
	left:15px;
	color:#033364;
	background:rgba(255,255,255,0.75);
	font-size:13px;
	padding:3px;
	-moz-border-radius: 5px;
	border-radius:5px;
}
/* If using user thumbnails there''s a pause well the new large image loads. This is the loader for that */	


/*	
-----------------------------------------
	Começo do Menu e sub-menu			|
-----------------------------------------
*/
#nav, .nav, #nav .nav li { margin:0px; padding:0px;}
#nav {padding: 30px 0 0 0; min-height:30px;}
#nav li ul.first {left: -1px;top: 90%;text-align: left;}


li, li a {color:#033364; text-decoration:none; font-size:11px;}
#nav .nav li { width:100%; text-indent:10px; line-height:25px; margin-right:10px;  
border-left:none; border-right:none; background:#fff;font-size:9px; letter-spacing:-1px;}
#nav li a {display:block; width:inherit; height:inherit;}

ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#fff; background: #19387f; /* Old browsers */
background: -moz-linear-gradient(top, #19387f 0%, #2989d8 50%, #419be0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#19387f), color-stop(50%,#2989d8), color-stop(100%,#419be0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #19387f 0%,#2989d8 50%,#419be0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #19387f 0%,#2989d8 50%,#419be0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #19387f 0%,#2989d8 50%,#419be0 100%); /* IE10+ */
background: linear-gradient(to bottom, #19387f 0%,#2989d8 50%,#419be0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=''#19387f'', endColorstr=''#419be0'',GradientType=0 ); /* IE6-9 */
	
	}
li:hover > .nav { display:block; position:absolute; width:180px; top:-2px; left:50%; z-index:1000; border:1px #fff solid; } 
li:hover { position:relative; z-index:2000; } 
/*	
-----------------------------------------
	Fim do Menu e sub-menu				|
-----------------------------------------
*/


/*	
-----------------------------------------
	Começo do Accordion					|
-----------------------------------------
*/
#accordion {
    width: 100%;
    border:0 solid #333;    
	}

#accordion h2 {
    background:#ccc;
    margin:0;
    padding:5px 15px;
    font-size:14px;
    font-weight: bold;
    border:1px solid #fff;
    border-bottom:1px solid #ddd;
    cursor:pointer;    
    color: rgb(0,0,0);
}

#accordion h2:hover {
    background-color: rgb(220,220,220);
}

#accordion .pane {
    border:1px solid rgb(255,255,255);
    border-width:0 2px;
    display:none;
    height:200px;
    padding:15px;
    color:rgb(102,102,102);
    font-size:12px;
}

#lasttext {
padding-bottom:20px;	
	
}	

#accordion .pane:current {
    display:block;
}

#accordion .pane h3 {
    font-weight:normal;
    margin:0 0 -5px 0;
    font-size:16px;
    color:#999;
}

#accordion {
	background:#fff;
	width: 100%;
	border:1px solid #ddd;
	margin-bottom:10px;
	display:inline-block;
}
/* accordion header */
#accordion h3 {
	background:#f0f0f0;
	margin:0;
	padding:5px 15px;
	font-size:11px;
	font-weight:normal;
	border:1px solid #fff;
	border-bottom:1px solid #ddd;
	cursor:pointer;
	letter-spacing:1px;
}
#accordion h3:hover {
	background-color:#ccc;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
/* currently active header */
#accordion h3.current {
	cursor:default;
	background-color:#ddd;
}
/* accordion pane */
#accordion .pane {
	border:1px solid #fff;
	border-width:0 1px;
	display:none;
	height:auto;
	padding:15px;
	color:#000;
}
/* a title inside pane */
#accordion .pane h4 {
	font-weight:normal;
	margin:0 0 10px 0;
	font-size:16px;
	color:#000;
}
#accordion .pane p {
	margin:0 0 10px 0;
}
/*	
-----------------------------------------
	Fim do Accordion					|
-----------------------------------------
*/



/*	
-------------------------------------------------------------------------------------------------------------------------------
ONDE A MÃDIA(DISPOSITIVO) TIVER LARGURA MÃXIMA DE 580px EXIBIRÃ ASSIM  |
-------------------------------------------------------------------------------------------------------------------------------
*/
@media only screen and (max-width: 580px){
 #menu ul li {
 display: block;
 border: 0;
 border-bottom: 1px #033364 solid;
 }
 .col-3 {
 width: 98%;
 padding: 1%;
 float: none;
 }
 #footer {
  font-size: 10px;
  font-weight:normal;
 }
}

/*	
--------------------------------------------------------------------------------------------------------------------------------
ONDE A MÃDIA(DISPOSITIVO) TIVER LARGURA MÃXIMA DE 890PX EXIBIRÃ ASSIM   |
--------------------------------------------------------------------------------------------------------------------------------
*/

@media only screen and (max-width: 890px) {
	#content { margin-bottom: 0;	}
	#slider { display:none;	}
	#accordion .pane img { display:none;	}
	#main-nav {	position: static;}
	#slider {display:none;}
	#content_page {margin: 0;padding: 8px;}
	#content_page .row img {display:none;	}
	#footer {line-height:20px;position: static;	bottom: auto;}	
	#logo {float:none;width:100%;text-align:center;padding:0;}
}
Paulo Henrique

Paulo Henrique

Responder

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar