Problema de optimizacion de menu

Mensaje Nº 3 | 8:44 AM 2012-04-20

Hola mi estimado agradezco por tu tiempo y por tu atención: Probé casi en todos los browsers, pero cómo pudiste ver en IE es un desastre, fracaso y no me gustaría dejarlo en esa forma

/****************************

****************************/

#container {
width: 1080px;
position: relative;
margin:-4px auto -10px;
}

ul#nav {
list-style: none;
height: auto;
padding: 0;
margin-left:0px;
display: inline-block;
border: 1px solid #000;
position: relative;

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

ul#nav li {
text-align: left;
}

ul#nav>li {
float: left;
border-top: 1px solid white;
position: relative;

background-repeat: no-repeat;
background-color: #608bd5; /* Old browsers */
background-image: -moz-linear-gradient(top, #618dd8 0%, #587bb7 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#618dd8), color-stop(100%,#587bb7)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, #618dd8 0%,#587bb7 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top, #618dd8 0%,#587bb7 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(top, #618dd8 0%,#587bb7 100%); /* IE10+ */
background-image: linear-gradient(top, #618dd8 0%,#587bb7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#618dd8', endColorstr='#587bb7',GradientType=0 ); /* IE6-8 */

-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}

ul#nav>li:hover {
background-position: 0 -10px;
}

ul#nav > li:hover ul{
-webkit-animation: anim .2s forwards linear;
-moz-animation: anim .2s forwards linear;
-ms-animation: anim .2s forwards linear;
-o-animation: anim .2s forwards linear;
animation: anim .2s forwards linear;
}

ul#nav>li:hover>a {
color: #FFF;
}

ul#nav>li:visited>a {
color: #000;
}

ul#nav>li>a {
padding: 10px 15px;
color: #FFF;
text-decoration: none;
font: 12px Arial;
border-left: 1px solid #FFF;
border-right: 1px solid #eee;
display: block;
line-height: 15px;

-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}

ul#nav>li:first-child>a, ul#nav>li:first-child {
border-left: none;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}

ul#nav li:last-child a, ul#nav li:last-child {
border-right: none;
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}

/* 2nd Level */

ul#nav > li > ul {
position: absolute;
list-style: none;
padding: 0;
background: #618dd8;
top: 55px;
width: 230px;
border-radius: 0 0 4px 4px;
border: 1px solid #b3b3b3;
overflow: hidden;
opacity: 0;
left: -999px;

}

ul#nav > li > ul > li {
padding: 10px 0 10px 0;
border-top: 1px solid #aaa;
border-bottom: 1px solid #efefef;

-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}

ul#nav > li > ul > li:hover {
background: #6d9ef1;
border-top: 1px solid #999;
border-bottom: 1px solid #fff;
}

ul#nav > li > ul > li:hover a {
color: white;
}

ul#nav > li > ul > li:first-child {
border-top: none;
}

ul#nav > li > ul > li:last-child {
border-bottom: none;
}

ul#nav > li > ul > li > a {
color: #FFF;
text-decoration: none;
padding: 10px 20px 10px 15px;
font: 12px Arial;

-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}

@-webkit-keyframes anim {
0% { left:0; opacity: 0}
100% {left: 0; top: 35px; opacity: 1}
}

@-moz-keyframes anim {
0% { left:0; opacity: 0}
100% {left: 0; top: 35px; opacity: 1}
}

@-ms-keyframes anim {
0% { left:0; opacity: 0}
100% {left: 0; top: 35px; opacity: 1}
}

@-o-keyframes anim {
0% { left:0; opacity: 0}
100% {left: 0; top: 35px; opacity: 1}
}

@keyframes anim {
0% { left:0; opacity: 0}
100% {left: 0; top: 35px; opacity: 1}
}

.menu {padding-left:12px;padding-right:10px;

#gallery{
list-style-type: none;
height: 1%;
width: 500px;
margin: 0 auto;
font-size: 0.75em;
margin-bottom: 20px
}
#gallery:after{
content:"";
display:block;
clear:both
}
#gallery li{
margin:0 10px 10px 0;
float:left
}
#gallery li a{
position:relative;
display:block;
float:left;
width:110px;
height:110px;
text-decoration:none
}
#gallery li img{
padding:4px;
background:#f0f0f0;
border:solid 1px #ddd;
position:absolute;
left:0;
top:0;
-ms-interpolation-mode:bicubic
}
#gallery li span{
display:block;
padding:5px;
background:#f0f0f0;
color:#666;
position:absolute;
top:-35px;
left:-35px;
width:170px
}

Últimos temas

Temas populares

Página 1 de 1 1
Moderador del foro: ZorG