Não acontece o 'Transition'
Bom galera, primeiramente boa noite!
To com um probleminha que não consigo resolver... quando passo o mouse sobre a Opção 1 aparece o submenu.. o problema é que ele aparece de uma forma brusca.. ai pensei, vou usar transition para alterar a opacidade dele... só que não sei o que acontece que não dá certo...
Alguém saberia me dizer o por quê?
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dropdown</title>
<style type="text/css">* {
margin:0;
padding:0;
}
#gridAll {
width:1000px;
height:auto;
margin:auto;
}#gridMenu { }
#gridList{ width:800px; height:auto; margin:auto; }
.gridCell {
display:block;
float:left;
width:150px;
position:relative;
display:inline;
margin:2px;
padding:20px;
color:white;
font-family:Arial;
font-size:22px;
background-color:#000;
text-shadow:1px 1px 10px #333;
text-align:center;
cursor:pointer;
-webkit-transition:all 400ms linear;
}.gridCell:hover {
background-color:#f00;
padding-bottom:138px;
-webkit-transition:background-color 400ms linear;
-webkit-transition:padding-bottom 400ms linear;
}
.gridList2 {
position:absolute;
left:0;
display:none;
opacity:0.2;
}.gridCell:hover .gridList2 {
float:left;
width:190px;
display:block;
margin-top:15px;
opacity:1;
-webkit-transition:opacity 1s linear 2s;
}
.gridCell2 {
padding:10px;
list-style:none;
color:#fff;
background-color:#FFE7BA;
font-size:16px;
text-shadow:none;
}.gridCell2:hover {background-color:#000;}
.gridCell2 a {
color:#fff;
text-decoration:none;
}
</style>
</head>
<body>
<div id="gridAll">
<div id="gridMenu">
<ul id="gridList">
<li class="gridCell">
<a>Opção 1</a>
<ul class="gridList2">
<hr>
<li class="gridCell2"><a>Opção 1.1</a></li>
<hr>
<li class="gridCell2"><a>Opção 1.2</a></li>
<hr>
<li class="gridCell2"><a>Opção 1.3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>Agradeço desde já!
Discussão (1)
Carregando comentários...