Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Vejam:
http://globoinfo.com.br/plano/css_piloto/noticias.html
Se você abriu no Mozilla Firefox, não deve ter notado problema algum. Porém se você abrir no IE, o menu fica estranho quando você passa o mouse sobre ele. O problema até parece estar no hover, mas não está.
O menu está em lista. <ul><vários li/></ul>
O problema é....
Eu gostaria que quando estivesse selecionado o menu, a cor mudasse de cima a abaixo, e não como acontece no IE.
para centralizar no meio do #menu, em #menu ul eu defini como padding:10px do top e padding 7px do bottom;
No firefox , o #menu ul li a:hover sobrescreve totalmente isso, e ignora os padding, fazendo com o hover seja exibido de cima abaixo, como se pode ver quando esta no firefox (border-top:10px solid #fff; border-bottom:14px solid #fff;}. No IE, o padding-top do #menu ul é levado em consideração. enfim, dá uma confusão no IE.
Como ajeito isso? alguém sabe uma forma melhor de montar um menu desses ???
#geral {
position: relative;
float: left;
width: 765px;
background: #fff;
border: 0px solid #000;
padding: 0px;
}
#logo {
position: relative;
float: left;
width: 150px;
padding:0px;
margin: 0px;
}
#topo {
position: relative;
float: right;
height: 50px;
width:765px;
background: #ddffff;
padding:0px;
margin: 0px;
}
#principal {
position: relative;
float: left;
width: 765px;
padding:0px;
margin: 0px;
}
#menu
{
margin-top:0px;
padding-top:0px;
text-align: center;
}
#menu ul {
margin-top: 5px;
padding:10px 0px 7px 0px;
margin-left:0px;
float: left;
width: 765px;
height: 20px;
background-color:#00BFFF;
list-style:none;
margin-top: 0px;
}
#menu ul li {
display: inline;
height: 20px;
padding-top: 0px;
}
#menu ul li a {
font-size: 11px;
padding: 0px 10px;
/*float:left;
visual do link */
color: #191970;
text-decoration: none;
height: 20px;
font-family: verdana;
font-weight: bold;
}
#menu ul li a:hover {
background-color:#fff;
color: #191970;
border-top:10px solid #fff;
border-bottom:14px solid #fff;
padding-top: 0px;
}e muito agredecido desde já
Carregando comentários...