SUBMENU QUE FUNCIONE NO IE
08/03/2013
0
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.
AGORA DO CSS EM QUESTÃO:
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
Curtir tópico
+ 0
Responder
Clique aqui para fazer login e interagir na Comunidade :)
